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
Related
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.
So I am having an issue with JQM and device rotation on the iOS products. When the user spins the screen, it doesn't resize to fill. I have this line in the head which handles the display size:
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" >
Does anyone know why the iPhones are not handling the screen rotation properly? It works fine on my android.
Figured it out lol.
in my head, I was doing this:
<meta name="viewport" content="height=device-height,width=device-width,initial scale=1.0,maximum-scale=1.0" >
to this:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Boneheaded mistake. Hopefully that helps some of you guys out.
I want to fit my page on the screen, whatever resolution is there and not allowing scaling.
I have seen in alot of documents/resource that this is the best way of using viewport to adjust the whole page on the screen. (even jquerymobile generate this viewport)
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
but It only show some portion of the page.
But this code works as excpected. The whole page is fit on the screen
<meta name="viewport" content="user-scalable=0;" />
Whats the difference?
This meta tag requires that your document width is device width. jQuery Mobile uses it because jQuery Mobile make sure that it will adjust document width according to device width. If you want to put a 980px wide page in a 320px wide screen, then you have to set 980px in the meta tag:
<meta name="viewport" content="width=980, user-scalable=no">
If you don't know your document width, you have to get it first and then set the meta tag property.