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%}
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!
It worked before but all of a sudden it stopped working :(
#media only screen and (max-width: 768px) {
form,
button,
input {
width: 80vw !important;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
I have html, css and js code included in the link below:
DEMO: CodePen
The problem is an invisible special character inserted into your code.
It's making the declaration invalid, which calls CSS error-handling into play, and the rule is ignored.
If you copy and paste the code into Notepad, you'll see it.
In computer science we call this a focused, non-repeating phantasm, or class-5 free roaming vapor... real nasty one, too! :-)
The simple solution is to just delete that media query and re-type it.
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>
I'm trying to do a zoom out on the viewport to .8 for heights bellow 1080.
So far I've done this:
HTML HEAD
<meta name="viewport" content="width=device-width, initial-scale=1" />
CSS
#media screen and (max-height:1079px){
#viewport {
width: device-width;
zoom: .8;
}
}
No prefix since I'm using firefox to test it.
Any ideas?
Thanks!
Since you mentioned Firefox, the problem is that Firefox, as of versoin 37, does not support the #viewport at rule. Since Firefox has a unresolved bug on the issue from 2012, you might want to try an alternative such as reducing font-size to .8em.
If you check the Firefox console, you will see this css error:
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%; }