So basically, I'm developing a mobile website with fixed page dimensions.
Using this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
doesn't help. I still can double-tap and pinch to zoom on older AOSP browsers (4.0 - 4.2.2).
Does anyone have a solution for this issue?
Thanks in advance!
From this source:
Except for Android WebKit. Obviously. Android WebKit allows initial-scale to set the layout viewport width only if the value is 1 AND there is no width directive. So only initial-scale=1 without any other directives works.
Related
I have created an application which will work only on limit zoom level. So I need to restrict that user can zoom the limited level.
I have tried with,
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
But it always allows upto the device.
You need to adjust your media query to prevent zooming
try this
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
EDIT: I changed the viewport back to 1 and im gonna change the font sizes to how the size that should look the same. will update after i changed it all to see if it really works.
I tried alot of different things but it just doesnt show anything correctly. When I use ionic view it works perfectly and in browsers too.
viewport tag
<meta name="viewport" content="width=device-width, initial-scale=0.3, maximum-scale=0.3, minimum-scale=0.3, user-scalable=no">
I ran the apk file on bluestacks and samsung galaxy s4 but the results i get looks like this: http://imgur.com/5VPYcwH
it should look like this: http://imgur.com/wZEnTx1
I also tried to change the viewport to alot of different things and it didnt work.
Your problem is being caused by the scale you have set in your viewport.
<meta name="viewport" content="width=device-width, initial-scale=0.3, maximum-scale=0.3, minimum-scale=0.3, user-scalable=no">
The scale (initial only if you want to give the user an option to zoom in your app; if not, change maximum and minimum as well) should be set to 1 instead of 0.3. Something along the lines of:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
make your initial scale property set to 1.0
Is there any way to change the default zoom of a browser with viewport or javascript,when users acces your website?(PC,Laptops)
Ohh ive seen you mean PC, Laptops
That is only possible via css (or javascript css manipulation) you should set a zoom attribute to the body element
even though i don't recommend to do this its the only way I know
OLD POST:
You should give this site a try:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
especialy this:
<meta name="viewport" content="width=device-width, initial-scale=1">
The initial scale is like a zoom for your page
Try
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
where initial-scale is what you want, you also might want to change user-scaleble to yes depending on system requirements.
i'm working on a web app which has layout constraints set by javascript, it mainly works around calculations on the window.innerHeight but i get a bad value only on my iphone4 with iOS7.
this is a sample screenshot (as you can see at the bottom, the text is cut):
what i get is a window.innerHeight of 568px instead of 480px and this is breaking my layout.
anyone encountered any error like this?
i've my viewport set like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
any help is GREATLY appreciated. thanks :)
I have a canvas element that is 608 pixels wide and am trying to get both the iPhone and iPad to zoom-in so that this fills the screen.
I have been experimenting with various values but none seem to work on both devices. Here is what I currently have (works on iPhone but looks small on iPad):
<meta name="viewport" content="width=608; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
How can I achieve this?
Solved it, need to ensure that the minimum and maximum scale are set properly because otherwise it is constrained!
<meta name="viewport" content="width=608, maximum-scale=1.5, user-scalable=no" />
You might want to try:
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">
Or you may need to use javascript to get the current viewport scale, this article may help: http://menacingcloud.com/?c=viewportScale