Android Browser Ignores Responsive Web Design

Android browser ignores responsive web design

After some more investigation on that topic I found the following solution.
You need to put in the following <meta>-Tags to tell the browser to disable the scaling. Then the CSS @media selectors are working as expected.

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width">

See: How can I "disable" zoom on a mobile web page?
And: http://garrows.com/?p=337 (EDIT: http://garrows.com/blog/disable-mobile-browser-zoom-function

Regards,

Stefan

-- edit --

When applying the above solution: For some devices the device-resolution reported when using "scale=1.0" is lower than the physical screen resolution and you'll possibly have effects like blurred pictures. This is caused by the higher dpi (dots per inch) of the screen. The screen size reported in JavaScript is however correct. For small screens with high resolution the correct "physical pixel" resolution can be achieved by using:

<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=0.666667, maximum-scale=0.666667, user-scalable=0">
<meta name="viewport" content="width=device-width">

However, this should cause problems with screen where the dpi-value is lower. It seems safer to use the screen resolution reported by JavaScript.

-- edit --

Use commas instead of semicolons to avoid Chrome console errors about 'Viewport argument value “device-width;” for key “width” not recognized. Content ignored.'

http://royaltutorials.com/viewport-argument-value-device-width-for-key-width-not-recognized-content-ignored/

Responsive Web Design Automatically Zoomed Some Times

Use the below meta tag in head

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Responsive width is too small on phone, but okay on desktop browser

There is not responsive without viewport meta tag

<meta name="viewport" content="width=device-width, user-scalable=no">

More about viewport meta tag https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Responsive image not working on android phone/chrome browser

I have been fiddling with chrome, firefox and a custom browser on Android and with FF and chrome on a 24" screen on Windows 7 and they all show scrollbars.

Depending on the width and height of your image (actually its ratio: 3:2, 4:3, 16:9, 16:10 etc.) you will see scrollbars when resizing it on a screen with a different ratio than your image. I am not sure, but it may well be that the internal browser engines of FF and Chrome use the same kind of logic to handle image sizing (hense the same effect on Android's Webview and WebChromeClient views) and iOS does not.

You should ask yourself if it is worth all the trouble getting this issue worked out for you or simply accept it as it is (I'd opt for the last).

Have a look at the code below (download => Github renevanderlende/stackoverflow) It is not only an acceptable solution for your issue, but also adds some easy to understand Responsiveness to your page you can fiddle with!

The images in the code are from amazing Unsplash, a fantastic place to find high-quality public domain photos.

And if you are a beginner like me, a visit to Codrops really is a must. Great clear and free tutorials with awesome, ready to use code!!

Cheers, Rene

<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>question-26464777</title>  <style>  div { background-size: cover; }   /* fully cover a DIV background */  img { width: 100%; }    /* Maximize IMG width (height will scale) */    /* Sample media query for responsive design, Resize your browser     to see the effect. DO check http://chrisnager.github.io/ungrid */  @media ( min-width :30em) {   .row { width: 100%; display: table; table-layout: fixed }   .col { display: table-cell }  } </style></head>
<body><div class="row">    <div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/1.jpg" alt="image 1"></div>    <div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/2.jpg" alt="image 2"></div>    <div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/4.jpg" alt="image 4"></div>    <div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/5.jpg" alt="image 5"></div>    <div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/6.jpg" alt="image 6"></div>    <div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/8.jpg" alt="image 8"></div></div><div class="row">    <div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/4.jpg" alt="image 4"></div></div></body></html>

Responsive design: Mobile version of site shows full version while loading

Just call your function before the document ready statement.

<script>
   thisWillFireImmediately();

   $(function() {
      thisWillFireOnDocumentReady();
   });
</script>

for more infos: Running jQuery code before the DOM is ready?

Android Browser Ignores Responsive Web Design