No matter what I try I can't get the viewport tag to work with a fixed width.
This is my current effort:
<meta name="viewport" content="width=640" />
It works fine on the iPhone simulator running iOS5. I'm testing it on Android 4.1.
I've read about including some code in the Java .onCreate(); method, but using PhoneGap Build I don't have access to this.
My app is here: https://build.phonegap.com/apps/188638
Any ideas?
Try below view port
`<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no, target-densitydpi=device-dpi"/`>
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.
I am building an responsive mobile website and need to disable zooming across all devices. I have used a meta tag which should in theory prevent zooming, and which works on iOS, windows Phone and some Android devices, but on several Android phones zooming is still enabled. Here is the meta-tag I have used:
meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"
I've also tried user-scalable=0. I know this is a known bug with Android but other sites have managed to disable zoom on the same phones that i am testing on e.g. http://m.bbc.co.uk/ so there must be a fix out there for this. Does anyone knows a reliable fix for this? Thanks!
Have you tried adding also maximum-scale=1.0?
Not shure this is the solution, but maybe worth a try.
Set initial-scale=0.
Try this:
<meta name="viewport" content="width=device-width, initial-scale=0">
check this : https://www.w3schools.com/css/css_rwd_viewport.asp
*you should add this => maximum-scale=1
check this: a link
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
I am working on a framework for A mobile site using Jquery Mobile. Has anyone been successful at locking the ability to scale for the android phone? Right now I am using <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />. This works for all phones, but for Android I can scale. Is there anything I can do in Javascript or change the view port settings? Any guidance, demo, or links would be really helpful!
You can use html meta tags to achieve that like
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
see example at http://tab.pagesjaunes.fr
I'm building an application with PhoneGap. i'm using my Galaxy S2 to test the application, and his screen resolution is 480x800. But when the View is created, his size is 320x800!
I tried too many things, but nothing works...
Is there here anyone that can please help me?
Oh, I'm using android's environment, with Eclipse, ADT, etc.
I found a way to do that. I already had tried by using a meta viewport, but I guess I don't put everything that is necessary.
Just put this meta tag below and everything should be fine.
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densityDpi=device-dpi" />
I have just developed an iPhone app using Phonegap and I now tried to post it to Android using Android SDK and guide available on Phonegap website. Everything works good except screen resolution and as I tested it on Android Emulator setting Nexus One Resolution, I found everything is too small and leaves half the screen empty. Is there a setting I need to put to make it exactly float like on iPhone?
UPDATED
I am using this viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
Use meta Veiwport tag or CSS media queries for multiple screen support
References :
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
http://www.quirksmode.org/mobile/viewports2.html
http://www.quirksmode.org/mobile/tableViewport.html#metaviewport