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">
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
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">
I'm building a mobile site and have the following meta tag set in the header:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Unfortunately, this isn't working on HTC devices (HTC Hero, etc) with Android 2.1. Any ideas on how I can disable pinch-to-zoom in this browser? Works fine on the iPhone.
I have contacted HTC about this issue and they have informed me that they don't have support for the viewport meta tag at all and there is no other way to disable zoom.
Quite disappointing.
This works on the default android and iPhone browsers. Although sadly it doesn't work for HTC's custom browser (as asked).
<meta content='True' name='HandheldFriendly' />
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
Just an idea, maybe not useful (not tested) :
Did you look into javascript support in Android's WebView? I think you might be able to call WebSettings.setBuiltInZoomControls(false); which might do what you need.
I've also played with this a LOT, and found no combination that actually disables the zoom.
You can however set the initial scale of the page, so when the user access it, it is in the correct zoom level.
The default zoom level for android browsers is "medium", but as mentioned, if the user changes this in settings (or pinch zooms), it will not be prevented.