Meta viewport does not scale website on iPad
I have a (fairly basic) website that I want to auto-scale and adjust so that the main content area is on the screen without scrolling horizontally on iPad. In landscape mode it works fine, however in portrait mode it leaves a part of it on the side and the user has to scroll horizontally. This is usually fine for other sites I've made, but for that I can't figure out what's stopping Safari from doing this.
I added the following line at the top of the HTML, but it doesn't seem to have any effect (I've tried various options, like adding initial-scale=1.0
, etc.)
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
What could be the reason why this doesn't work?
Clarification
I am not looking for a solution for media queries. I'm just trying to figure out why, on some sites, iPads (and other touchscreen devices) automatically scale the website to fit on the screen, when in this case something isn't causing it. I'm just trying to determine the reason for this.
source to share
I finally figured out the problem. iPads (and most touch devices) actually scale the website automatically, unnecessarily <meta name="viewport" ... >
unless the website is clearly designed to be responsive.
However, this scaling does not work if the site is too wide. My content was 1024px wide which was causing devices to disconnect for some reason.
I changed the width of the content to 960px (I don't know the actual threshold, but my other site that scales well had this width) and the problem was fixed immediately.
Add this answer in case anyone is looking for a reason why scaling is not working on their site.
Obviously, this has nothing to do with having a responsive site, it's just when the site is simple and scalable.
source to share
there is a fixed width for the inner container
div#branding{
width: 1024px;
}
#content{
width: 1024px;
}
div#footer{
width: 1024px;
}
change all 3 width
to 100%
for @media screen
more information on @media screens can be found here
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
div#branding {
width: 100%;
}
#content {
width: 100%;
}
div#footer {
height: 40px; /* remove height */
display: inline-block; /* change display:block to display: inline-block; */
}
}
and it will work
the content of the footer on the right is reduced as the content of the left side is larger
note: your footer will break when a fixed height is specified, you can remove it
to fix change footer css for footer
div#footer {
height: 40px; /* remove height */
display: inline-block; /* change display:block to display: inline-block; */
}
source to share
I used width: 100% and it solves my orientation orientation situations, but there seems to be media queries as well that might help:
@media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
/* Landscape styles */
}
Check this site for more: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
Let us know if it works.
source to share
Depending on the rules you got in your CSS, you need to assign a portrait mode like landscape or portrait and add the desired width.
@media screen and (orientation:landscape) and (max-width:1024px){
some rules that will be applied to iPad in landscape mode
}
And the big difference is that this will apply on all 1024px screens.
@media screen and (max-width: 1024px){
some css rules for "normal" screens on max-width: 1024px
}
EDIT: So make sure you split your "containers" 100% in different modes and adjust all other items. the scrollbar you got is actually a DOM element with fixed divs or margins and paddings that affect the width of the entire page
source to share
I think the meta tag has a minimum scale besides the maximum:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
I don't know if this will matter at the moment.
It should work in theory along with:
@media only screen and (min-width: 480px) {
/* landscape */
}
@media only screen and (max-width: 479px) {
/* portrait */
}
source to share