Web App on Android Browser Width Issue

Android width:100% fix (website takeover issue)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>  

This is the version that also controls the zoom.

Why is device-width not working on Chrome for Android?

From What I understand that is just a css based replacement for the following HTML meta tag:

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

I would suggest using the above meta tag in your index.html In addition too this you will still need to add @media queries to actually make it responsive for the various screen sizes.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px)  ... 

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px)  ... 

// Medium devices (tablets, less than 992px)
@media (max-width: 991px)  ...

In addition to the above PX based breakpoints, you can also use DPI-based break points: https://css-tricks.com/snippets/css/retina-display-media-query/

But to actually answer your question about the remote debug console I don't know about anything else that workes as well as the Chrome Developer tools for mobile (Ctrl + Shift + M)

Fixed web page width for mobile devices

Have you tried width=device-width?

I don't think forcing the 480px in the meta will do what you want (not crossing media-query-type boundries).

Incorrect width in Android webkit browser

In my WebView, I was able to fix the widths by turning off wide viewport.

webview.getSettings().setUseWideViewPort(false);

This disables horizontal scroll unless absolutely necessary, and div widths and zoom work as expected. Obviously this will only work with a custom WebView, maybe there is a more generic way to do this with something like <meta name="viewport" ...> ?

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/

---

Related Topics