Responsive design for various tablets and mobiles?

Forum Moderators: not2easy

Message Too Old, No Replies

Responsive design for various tablets and mobiles?

born2run

12:29 pm on Jul 31, 2018 (gmt 0)

Hi so I have a responsive site. However at this moment the design for devices like ipad is not right.

Is it OK if I ask the programmer to set all greater than 7" devices to show desktop version of my site? Any tips would be appreciated. Thanks!

not2easy

12:43 pm on Jul 31, 2018 (gmt 0)

Most css files do have a media query at 767px. It may or may not be desktop version over 767px, but most desktop views are fine on iPad screens.

born2run

12:58 pm on Jul 31, 2018 (gmt 0)

So above 767px I can allow desktop view? This will take care of Android and IOS tablets?

robzilla

1:16 pm on Jul 31, 2018 (gmt 0)

I'd say a 7" screen is still pretty small for a desktop view, but it depends on the layout. The best way to find out is by testing it on a variety of tablets. I'm sure there are also emulators to be found online.

Having one mobile view and one desktop view, and switching between them at a certain screen size, is not really what responsive design is all about, of course. Ideally, your design should adapt to the space it's given with small, incremental changes.

NickMNS

1:20 pm on Jul 31, 2018 (gmt 0)

I'm sure there are also emulators to be found online.

There is an emulator built right into:
Chrome
Opera
Firefox

Just right click and click "inspect element" then select the icon showing two screens. In Chrome/Opera "Ctrl + Shift + M".

born2run

1:31 pm on Jul 31, 2018 (gmt 0)

Yes thanks, only thing is I don't have programming resources available to extensively design and test a proper responsive site.

However for tablets as not2easy said, can I set the css media query at 767px and higher to set a desktop version of the site? Thanks!

robzilla

1:57 pm on Jul 31, 2018 (gmt 0)

For most [screensiz.es] of them, yes.

born2run

2:06 pm on Jul 31, 2018 (gmt 0)

not2easy is it 767px or 768px ? I was scanning google.

not2easy

2:56 pm on Jul 31, 2018 (gmt 0)

767px is the max-width for my first media queries to change the css layout for mobile. If you set max-width at 768px, then it cuts iPads out of the desktop css.

robzilla

3:15 pm on Jul 31, 2018 (gmt 0)

In other words, a max-width of 768px means screens with a width up to and including 768px. So to target screens of 768px and above, you indicate a max-width of 767px.

born2run

3:18 pm on Jul 31, 2018 (gmt 0)

Ok thanks so much guys!

born2run

5:52 pm on Jul 31, 2018 (gmt 0)

BTW it's 767px viewport size correct? Thanks!

not2easy

6:32 pm on Jul 31, 2018 (gmt 0)

No, it is 767px @media for the css, you don't adjust the viewport because the device uses that to calculate their device pixel ratio.

Your viewport is:

<meta name="viewport" content="width=device-width, initial-scale=1">

and it belongs in the <head> of the html page.

The media query serves different css settings for different screen widths. It may look like this:

@media only screen and (max-width: 767px)

and it belongs in the css file.

born2run

7:38 pm on Jul 31, 2018 (gmt 0)

Ok thanks again!

Dimitri

12:01 pm on Aug 2, 2018 (gmt 0)

You don't have to use an universal pre-defined size to switch between desktop / tablet / smartphone. Just resize your browser (on desktop) , and see by yourself at which point it would be more wise to apply changes to the page layout.

Additionally, the web dev tool of Chrome lets you preview what your site can look like, on different devices (there is something a bit similar in Firefox, but less easy to use, in my opinion)