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" />
Related
How do i force the browser to disable horizontal bar even when you are viewing your web content at 125% - 150%?
This will disable when zoomed. Add this to your CSS file.
html{overflow:hidden;}
CSS:
html,body {
overflow-x:hidden;
}
HTML:
For mobile devices, you probably need this meta tag in your <head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, 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.
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.
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