How can i change initial scale value with css? I don't want to use javascript.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
You can use #viewport. But, it might not be supported in some browsers.
https://developer.mozilla.org/en-US/docs/Web/CSS/#viewport
Related
I working on simple HTML5 page and using the below code to prevent zoom/scroll.
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="yes"/>
<meta name="screen-orientation" content="landscape"/>
<meta name="viewport" content="user-scalable=0"/>
The Facebook app review team came back with the below feedback and rejected my app.
Developer Policy 1.2 - Build a Quality Product
We found that your game allows zooming/scrolling outside of gameplay, which detracts from the in-game experience.
Unless your game requires these motions for gameplay, please revise your game before resubmitting for review.
Not sure how to prevent zoom/scroll in HTML5 for iOS devices. Please help.
pras,
As #lukeocom suggests, if you have overflow issues, you can set the overflow property to hidden for overflowing issues. But if you just want to to disable zoom, you can use the following in your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
This should work on mobile, but not on desktop. If you want to disable zoom on desktops as well, you can attach an event listener to the Ctrl, + and - keys and then use e.preventDefault() in your JavaScript and do the same for Ctrl + mousewheel events.
Edit: Also, you can use zoom: reset in your CSS if you want to disable the zoom functionality for sure on the desktop. Though, this works only in Chrome.
These are my sources:
meta tag source
JavaScript source
MDN documentation for further reading
Im not sure if this will help you, but it sounds like you may have some overflow content. So you could try adding overflow: hidden to your html tag, or setting max-width/height, or setting absolute or fixed position:
:root,
html {
overflow: hidden;
position: absolute;//or fixed
top:0;
right: 0;
bottom: 0;
left: 0;
max-width: 100vw;
max-height: 100vh;
}
Alternatively, inspect your page content and see if any containers are overflowing, and apply the above to that specific container, or fix the cause of the issue itself. Debug debug debug!
I want that my site uoga.onclick.lt in mobile devices would be zoomed out to fit all content.
My tag is:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I tried lots of changes like changing initial-scale and other option changes, but it's still loads like this:
Device is SONY Xperia Z2, but i tried with Samsung NOTE 2 and nexus 5, the results are the same...
This did the trick
<meta name="viewport" content="width=500, initial-scale=0.2">
Tested on Sony Z2, Samsung Note 2, Samsung galaxy s5, Nexus 5.
I really don't know why content="width=device-width" didn't worked...
If you want to see the result, i changed server - uogauoga.itgirnos.lt
I know this is an old question, but I just noticed if you set the width which is larger than your screen for body or html element, the viewport won't work as expected.
e.g.
body
{
width:1080px;
}
Just came across this issue and I have similar problem as #Charlie but different solution. In my case I had pre tags that had long lines, so in fact the width of the body was large (hence similarities):
the fix:
<style>
pre {
white-space: pre-wrap;
}
</style>
So I pushed a site to http://austinenl.com however it appears that on iPhones, it appears really zoomed out. From my research, I needed to add
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
However, after adding this, I am still getting reports that the site looks bad on iphone. I can't find any other source that will give any other suggestions on what would cause this issue, so I am hoping someone here can help.
Instead of using: <meta name="viewport" content="width=device-width; initial-scale=1.0;">, which uses a semicolon.
You could try using: <meta name="viewport" content="width=device-width, initial-scale=1">, which uses a comma.
If have been using the second option for years now and everything has been working fine. This is the way as Apple intended it. See the Supported Meta Tags.
Edit: I've checked your CSS and I've found some rules which I'm not sure where they are used for, but removing them seems to help.
.area-checkboxes {
display: -webkit-flex;
}
.area-checkbox {
min-width: 250px;
-webkit-flex: 1 1 250px;
flex: 1;
}
Both found in style.css
Try adding a width of 100% to the body and get back to me
html,body{width:100%}
Now I have read a couple SO answers about this question, but I have tried them all with no luck. I have found that that website I have been developing on I have had my browser zoom set differently than the default zoom size. I want to accommodate for people that may still have the default zoom size. Being the curious guy that I am, I wondered if I can change the browser size for that window. If the user wants to zoom in or out after they load page that's up to them, but I wanted to see if there was a way to have a default zoom so that it looks how it should.
Some things that I have tried
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Tried this and literally nothing changed on my browser. I set it to default just to check as well, and even after changing all the numbers it never made a difference.
So I came across a different way to do this, in CSS and same thing nothing happens at all.
#-viewport
{
zoom: .5;
}
So now I am on SO. I'm not even 100% positive that what I am trying to do is the right way to do it. I could be doing something completely off track, so that's why I am asking this question.
Basically, how do I achieve a default zoom size for the size on load, and what is the syntax for it?
Try: user-scalable=no
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
And:
#-webkit-viewport { zoom:100%; }
#-moz-viewport { zoom:100%; }
#-ms-viewport { zoom:100%; }
#-o-viewport { zoom:100%; }
#viewport { zoom:100%; }
In some smartphones browsers is set ( by default ) font zoom - like for example 130%. How can i dont allow browser to resize font?
Sorry for my english
I found this for fonts. I'm not sure it will work on different systems, but you could give it a try:
body {
-webkit-text-size-adjust: none;
}
It seems you can also turn auto-scaling off:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />