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
Related
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!
I have a webapp with fixed width layout at 1280px.
I need to adapt this webapp for mobile.
Basically I need to fill the whole device screen width with 1280px by scaling acordingly.
I managed to do this by using viewport meta tag with fixed width.
<meta name="viewport" content="width=1280, user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"/>
It works great in mobile chrome browser.
Now I need to wrap this webapp inside mobile app.
I picked Phonegap, but as it turned out it won't work as good as chrome browser did.
It doesn't do any scaling, everything is huge.
How can I get it to work? Is it even possible with phonegap to scale fixed layout accordingly in order to fill the screen, without breaking the layout? Or maybe there's any better alternative to phonegap?
What i understand, you have a fixed width, so thats the problem.
1280 is also a lot :)
I suggest that you build your site with a responsive framework eg. http://jquerymobile.com/
I always use:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I want to make an HTML page that fit on any portable device and fill the screen and dynamically sizes its content. Also it should work on iPhone and Android. And the users should not be able to resize the page.
I have tried these ideas:
make the layout a with width 100% but still the user can zoom in/out
I have used DIV tags but it did not fill in the screen on the iPad but works well on the iPhone.
I hope you have a good idea to help me out.
If you have already tried using percentages and are unhappy with the results, I recommend you look into using CSS Media Queries. By determining the resolution your website is being viewed in, you can optimise it for each device specifically.
If you want to disable zooming for your website in mobile devices, make sure to add this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
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/