{"id":1995,"date":"2016-10-14T15:48:29","date_gmt":"2016-10-14T12:48:29","guid":{"rendered":"http:\/\/www.instinctools.eu\/?p=1995"},"modified":"2025-01-13T14:10:49","modified_gmt":"2025-01-13T11:10:49","slug":"post-responsive-web-design-mobile-devices","status":"publish","type":"post","link":"https:\/\/www.instinctools.com\/blog\/post-responsive-web-design-mobile-devices\/","title":{"rendered":"Part 2. Responsive Web Design. Mobile Devices"},"content":{"rendered":"\n

We brought up an issue of breakpoints for a desktop\/laptop responsive site version in the previous article Responsive Web Design Using Breakpoints<\/i>. Now it is time to talk about the mobile layout. Let us make two features clear for you to take full advantage of the information below. These features are viewport meta tag settings and the DPI. Though simple at first sight, these things cause much confusion.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Viewport Meta Tag<\/h3>\n\n\n\n

Let us leave lengthy theorizing aside and go straight to the practice.<\/p>\n\n\n\n

Viewport Meta Tag is a command telling to the gadget how to scale the website. We would like to make an honest agreement on not trying to squeeze the mock-up evenly into the screen’s size, making the user’s vision blurry.<\/p>\n\n\n\n

\"Responsive
Pic.1.<\/strong> Viewport is set incorrectly or absent<\/figcaption><\/figure>\n\n\n\n
\"Responsive
Pic.2.<\/strong> The settings are correct, but styles for mobile devices are absent<\/figcaption><\/figure>\n\n\n\n
\"Responsive
Pic.3.<\/strong> A fully functional mobile version of a site with correct settings and styles for mobile devices.<\/figcaption><\/figure>\n\n\n\n

Add meta tag with parameters:<\/p>\n\n\n\n

<head><\/span>
\n<meta name<\/span>=\"viewport\"<\/span> name<\/span>=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"<\/span>\/><\/span>
\n<\/head><\/span><\/code><\/p>\n\n\n\n

Set any width supported by the device, launch the site in a 1:1 scale and forbid further zooming.<\/p>\n\n\n\n

What Happens When You Ignore Viewport:<\/strong><\/p>\n\n\n\n

Devices will scale the mock-up at random, leaving you no way to find out, how many pixels are actually displayed in the browser’s window.<\/p>\n\n\n\n

DPI<\/h3>\n\n\n\n

DPI is a quantity of pixels (dots) per inch.<\/p>\n\n\n\n

Modern mobile phones and some PCs have the pixels density of over 72. However, we do not believe their producers: they do not tell us the whole truth about coordinates used to display mockups. The mere size of screens in pixels does not say enough to do the math.<\/p>\n\n\n\n

The thing is, mobile browsers use their own points, not equal to the physical pixels of a device. Usually these points are divisible by two in order to make information volumes visually comparable, considering the physical dimensions of devices. For instance, 1000 pixels for a smartphone is the size of a palm, 1000 pixels for a PC is the size of an A4 landscape sheet. That is why a mock-up which looks easy-to-eye on PC will look small and unreadable on the display’s screen.<\/p>\n\n\n\n

iPhone 6 Example<\/h3>\n\n\n\n

iPhone 6 is 750 pixels wide. However, the browser divides this value by two and thinks that the full width mock-up has 375 pixels. A 750 pixels-mock-up will be either displayed only in half or squeezed in, depending on viewport<\/i> settings.<\/p>\n\n\n\n

Our honest agreement, however, keeps us from squeezing. It leaves us only displaying the mock-up correctly in 375 pixels, which are the said points in terms of high DPI mobile devices.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

2 pixels of the gadget’s screen horizontally equal 1 pixel (point) for browser. The same in vertical direction.<\/p>\n\n\n\n

Mobile Device Detection<\/h3>\n\n\n\n

We remember from the first part to use an abstract styles.css<\/i> file with all styles and a responsive.css<\/i> file containing breakpoints and styles for different statuses of the desktop version of a site.<\/p>\n\n\n\n

Now we need 2 additional css files, for tabs and for smartphones. The files are added in this order:<\/p>\n\n\n\n

    \n
  1. styles.css<\/i><\/li>\n\n\n\n
  2. responsive.css<\/i><\/li>\n\n\n\n
  3. phone.css<\/i> or tab.css<\/i><\/li>\n<\/ol>\n\n\n\n

    To identify device type, use a server-side method: for example, PHP class mobile detect<\/a>.<\/p>\n\n\n\n

    <head><\/span>
    \n<meta name<\/span>=\"viewport\"<\/span> name<\/span>=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"<\/span>\/><\/span>
    \n<link href<\/span>=\"\/css\/styles.css\"<\/span> rel<\/span>=\"stylesheet\"<\/span> type<\/span>=\"text\/css\"<\/span>\/><\/span>
    \n<link href<\/span>=\"\/css\/responsive.css\"<\/span> rel<\/span>=\"stylesheet\"<\/span> type<\/span>=\"text\/css\"<\/span>\/><\/span>
    \n<?php<\/span>
    \nrequire_once<\/span> 'Mobile_Detect.php'<\/span>;
    \n$detect<\/span> = new<\/span> 'Mobile_Detect'<\/span>;
    \nif<\/span> ($detect<\/span>->isMobile() && !$detect<\/span>->isTablet()) {
    \necho<\/span> '<link href=\"\/css\/phone.css\" rel=\"stylesheet\" type=\"text\/css\">'<\/span>;
    \n}
    \nif<\/span> ($detect<\/span>->isTablet()) {
    \necho<\/span> '<link href=\"\/css\/tab.css\" rel=\"stylesheet\" type=\"text\/css\">'<\/span>;
    \n}
    \n?><\/span>
    \n<\/head><\/span><\/code><\/p>\n\n\n\n

    All the CSS styles for mobile devices are written in the phone.css<\/i> and tab.css<\/i> files; we also include media queries to avoid a pileup of files. The logic of breakpoints activation is the same as for desktop\/laptop versions, namely a cascaded inheritance of properties from the largest scale to the smallest one (see Part 1). Sometimes you only need 2 variants of style to be coded, for landscape and for portrait orientation. The minimal width is 320 pixels, while the said iPhone 6 Plus is 414 px wide: that is why some elements need to be adjusted to the size of the browser’s window.<\/p>\n\n\n\n

    Server Side Vs CSS & JS Detection<\/h3>\n\n\n\n

    Traditionally gadgets have a high dots density, a higher than 1.5 pixel ratio, and smaller screens than desktops. However, technologies change and limits become more and more blurred. Apple laptops and desktops, for one, already got retina displays with a higher dots density. Resolutions of tablets and laptops have been already comparable for a while.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    If you do not have a bulletproof solution for CSS-detection you will google to find a great deal of variants. All else being equal, the service-side device detection method is useful for small and medium web projects (see Part 1), as it:<\/p>\n\n\n\n