I just started convert my website having 'Responsive Web Design'. I installed the "Web Developer" Plug-in for Firefox ( http://chrispederick.com/work/web-developer/ ) to check, if it's working. Everything looked fine.
Now I tried this with my android phone. I didn't work correctly for portrait mode...
I tracked the problem down to wrong handling of the #media-selectors at the phone:
This page ( https://worldtalk.de/m/test.php ) generates a CSS that outputs what height/width and device-height/width + orientation the browser using as parameters.
I got the following results:
portrait, 800x1200
landscape, 800x400
The orientation was correct, the width/height and device-width/height were the same for both orientations.
But the device (HTC Desire Z) just uses a wrong screen resolution (800x1200) for portrait mode. I would like to avoid having a device database with user-agents or something like that.
Additional Information:
Browser-Version: WebKit/533.1
Android 2.3.3 / Sense 2.1
HTC Desire Z (T-Mobile firmware)
JavaScript reports identical screen resolution
Questions:
Is this only my phone model or a general behavior of the android browser?
How to fix this?
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
The resulution width of the phone is 375px.
The phone shows a page of an app and it has a width of 980px.
This creates a zoom out effect making everything on the page smaller than it should be.
See screenshot from desktop-chrome with the iPhone 6 device turned on. It looks the same on the real device and on android etc.
Other pages work as expected.
Could be related to css.
I think you forgot to set your meta viewport tag (to this):
<meta name="viewport" content="width=device-width, initial-scale=1">
Source: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I am experiencing some issues with a website I am trying to build. I did some research (like always) among this and other websites (as usual) and like never, I was not able to find a solution that worked for me. Please have patience with me since I am a beginner (developing for practice and learn purposes).
So here's the deal. I started building a website but I got stuck in making it responsive. After the research I was talking about earlier I used the
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no">
It works as long as I am accesing the website throught the Chrome Browser for Android. It also works in Chrome for Windows when I select the mobile view or resize the window. The only browser that acts like skipping that meta line is the stock Samsung Browser (WebKit - it think, though not sure about the name).
Is there anyone that experiences the same thing? I was thinking is only my phone (Galaxy S2) but it seems that I am not the only one with this issue.
Thanks in advance and looking forword for a solution.
LATER EDIT
Worked around with the values. Seems like the <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10.0, user-scalable=yes, target-densitydpi=device-dpi"> is actually not ignored.
I played around with the max zoom values and it seems to work. The only issue now is that the stock android browser does not display the page acording to the #media screen and (max-width: 640px) present in the stylesheet file...
LATER (FINAL) EDIT
The css code was somehow faulty. Deleted the multiple screen resolution support and worked around only with the normal web view, then added support only for one resolution (#media screen and (max-width: 500px)) seemed to work (anyway, there are just a few devices out there that has width lower than 500). Now in regular view, the site successfully shows the content according to the CSS file. Shrinking the resolution will also display the page in a correct manner. I also noticed, that using "max-width" should be done in ascending order (first deal with high resolutions resolutions first).
I am using cordova with jquery mobile for one android app.
For Viewport meta tag i am using below code
<meta name="viewport" content="width=device-width,
initial-scale=1.0;maximum-scale=1.0;user-scalable=0; target-densitydpi=device-dpi">
With older jquery mobile version it was returning actual height and width of device but when i have upgraded jquery mobile to 1.4.5 and cordova to 5.0 then it is returning some different resolution with window.innerHeight and window.innerWidth
Based on this resolution i am taking css files with media query
Please help me with this
Regards,
Bindal
My current workaround:
In index.html: <meta name="viewport" content="user-scalable=no, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, width=device-width, viewport-fit=cover">
In index.css the "body" part, add: transform-origin: 0px 0px; transform: scale(0.5);
window.innerHeight and window.innerWidth has the native resolution.
But haven't run test if one pixel is one pixel. Also I don't have enough device to test if it works across different device and different version of android.
With this mets it works for me, try it
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
Media queries are the wrong approach for several reasons:
you will not get an exact match for your screen, proportional layout is for some elements impossible
You will not be able to target Android 4.0+. Quad-HD and older devices use the same proportion with different -device-pixel-ratio factors. Factors are interpreted differently through Android versions, so some displays will be messed up
media queries are intended to supply DIFFERENT visuals for different resolutions, not the same visual scaled across resolutions
I recommend using https://github.com/biodiv/cordova-anyscreen (and drop jquery mobile). It will also give you the correct display and available resolution as app.deviceWidth, app.deviceHeight and app.containerWidth etc.
I've read a few of the related StackOverflow questions:
here, here and here,
but I feel like I am still without an answer.
I have a great responsive design (very simple), that looks great however you re-size the browser on desktop. Now when I inspect the element via Chrome and use their phone preview, everything is so small and tiny. The background doesn't stretch like it does on desktop. The main content doesn't fill the area like it does in the desktop, even when the browser is re-sized to be the same resolution as a phone's.
Yes, I've included the viewport specifications.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Honestly, no matter how much I play with the width, it doesn't seem to change anything - in the desktop browser, or on mobile.
Why does a webpage look completely different in a phone's browser than it does in desktop with the browser shrunk to the exact same resolution?
Maybe the user-scalable=0 instead of no?
content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0"
I am trying to set up MQ's to make a site responsive. I have it linked and everything it working fine, with one caveat the max-width: 480px doesn't work for droid. It does recognize my mobile stylesheet when I up the max-width to around 900px.
I haven't been able to find an answer to this yet, I have played around with some viewport tags:
<meta name="viewport" content="width=device-width" />
and
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
What is the best way to target Android phones using media queries?
One problem you might be running into is the fact that Android phones, even more so then Apple phones, have varying pixel widths.
For example, if you were testing on a Samsung Galaxy S3 or S4, the pixel width of those phones is well beyond 480px in landscape mode, even accounting for pixel density, so the media query would never fire. When it comes to some of the newer devices, you are better off to target user agent and then serve mobile queries based on that header response.
Also, see this answer for more details on testing for mobile devices.
You want to start by changing your meta tag to
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Good luck!