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" />
Related
I wonder how to prevent the mobile phone, both iOS and Android to prevent automatic zoom when an input tag of type "color" is selected. I have seen a few solutions online but none of them fit my use case. Here is what I have found so far and my comment on them.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>
This prevents all zoom, even manual zoom on my phone, which is not great.
Adding style="font-size:16px; to the input tag.
This doesn't work on my phone.
It looks like you need to set font-size rule when input is focused:
input[type="color"]:focus {
font-size: 16px;
}
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%}
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
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%; }