Client reports problem with my webpage on Nexus 7. Nexus have 1280x800 native resolution and I need display my webpage on this device (and other androids) non-zoomable, so in 1280x800resolution.
Before problem report, I had this setting for viewport.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
and from log I know that JS detected his resolution as 750x534 and my HTC EVO (native res. 960x540) had 640x308.
Than I changed viewport to
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
source
http://developer.android.com/guide/webapps/targeting.html#ViewportDensity
and My HTC EVO now display page in 960x462 (ok nonzoom) but Nexus still display this page in 962x442
Thanks for any help
Try this one, workd for me
<meta name="viewport" content="user-scalable=no,width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1, height=device-height">
Related
My front-end works with bootrstrap3.
Firstable I had responsive issues on mobile device that I fixed by adding the meta below:
<meta name="viewport" content="width=device-width, initial-scale=1">
That works well but I have still a strange issue. Most of times, by landing on a page on mobile device, the zoom is lower than 100%.
Actually, what I note is that when the issue is happening, the whole page is displayed on the viewport, so that the zoom is adapted to the total height and width of the page.
If anyone has a solution to fix this issue that would be great.
Try adding the following to your head-tag:
<meta name="viewport" content="width=device-width, user-scalable=no" />
For Mobile Safari in iOS 4.2.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
We are disabling zoom on a mobile web based application. You can't zoom in Native iOS apps and it's not required in our web application. If your site or app is mobile optimised then your users won't need to zoom. There are always use cases for disabling zoom. It doesn't have to always be one way or the other.
This is my Client website Click here, it is responsive on all screen which work good on desktop all browsers, Ipad all browsers but i am facing issue on android mobile browser like Chrome and Firefox.
I have one other browser on mobile which is provided by Asus default browser, website working responsive perfect on that..
I tested on multiple Android devices facing responsive issue.
Yes there is viewport meta tag already there
<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">
Any help will be appreciate..
I'm developing Android app with Phonegap and have problem with different screens. I searched a lot and everyone recommends to use meta tag , so I have include it in my html:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
when i'm testing it in emulator , it's exactly what I want , but when I tested it on Samsung galaxy S4 and Samsung galaxy s2 , it's very small. S4 is showing it much more smaller. One even cant read content ( I think it's because of xhdpi and hdpi). So can anyone advice me how to deal with it? Thank you very much!
The problem that you're having is because of the target-densitydpi=device-dpi. It's trying to utilize the high resolution your phone has. The default meta tag that PhoneGap starts out with has extra details that is causing this "problem".
Change your meta tag to:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
and it should work fine.
You should using CSS to control the UI base on the screen size & orientation.
ex:
#media only screen and (min-width:768px) and (max-width:959px)
Ref docs: CSS media queries
Everytime I load my site on Chrome for Android it either loads zoomed, or not at all ( ex: it will display half a text object and stop). I have tried every metatag under the sun to fix it including:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
and every combination of 1's and 1.0's I could think of. Site loads fine on chrome and safari for iOS, and on my nexus s stock browser. The only other clue I can think of is when the site loads zoomed in I can scale it back (pinch zoom) which I disallow in my metatag. It's like its not reading it or stopping short somewhere. Any ideas?
I am using Jquery Mobile UI and am finding that Samsung Galaxy S4s are not detected as being mobile devices. Is there a way to force them to be seen as mobile devices?
Use this meta tag inside your <head> section, this will solve your problem =)
<meta name="viewport" content="width=device-width, initial-scale=1">