My site has a fixed layout with a size of 1090px.
When I use this meta tag:
<meta name="viewport" content="width=device-width, maximum-scale=1">
the page will load zoomed in. Not all the way though (roughly 300px in width are out of view).
Also, you can not zoom the page out far enough to see the whole thing.
Shouldn't the width=device-width solve that?
So I tried an initial-scale of 0.29, which worked fine for the iPhone. But when loading the site on an iPad, it would obviously be way too small.
How can I fix this?
UPDATE:
So I just figured, that the width seems to be defined by the height of my page.
Safari on the iPhone fits the height in the viewport and doesn't care about fitting the width, also won't let you zoom out to see the whole width. It seem like if the page would be higher, you could see more of the width.
The width is just fine in landscape.
If your design is not responsive, It is better to target particular device resolution like for 320 width I would go for <meta name="viewport" content="width=320">
I have also noticed that content set as device width tend to break on ios 4 safari. I am afraid it's not the problem of ios safari it's the non-responsive design that causing the problem.
Also if the design is not responsive, then using this combination is worst
user-scalable=no or maximum-scale=1 with initial-scale=1
playing with initial scale will not solve the problem for all the devices.
Related
i'm using this template for wordpress:
http://demos.itsmattadams.com/jetwire/
When I try to load on iphone/ipad, the page don't fit to all wide because only show a portion. I don't want horizontal scroll either.
If I open the theme from a ThemeForest link, works good (maybe for the iframe?):
http://themeforest.net/item/jetwire-powerful-wordpress-blog-theme/full_screen_preview/2919709
I tried to change the main container width to 960px, but don't work.
Could somebody help me?
Remove this line
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
The site should then automatically fit inside the viewport. This line is basically telling the device to take the pixelwidth of the device (width=device-width) and match it to your site, by 'zooming in'.
Say your site is 960px wide, and the device is 320px wide; it will then only show the leftmost part (320px wide) of the site, leaving 640px 'flowing over' to the right.
Not specifying a viewport width will force the device to show the full site.
I'm having some issues with a page that doesn't have a lot of content and therefore has a small height. The iPhone is scaling the page, and due to this, I can't see the full menu bar (960px wide). I put a minimum height using a media query for both portrait mode and mobile devices with a minimum resolution. I really dislike doing this as I don't know how this will work on other devices, and it only works if the user doesn't rotate the screen (after rotation, the original issue re-occurs).
Is there some way to force the iphone to show a minimum width of 960px even if the height of the content doesn't fill the screen?
You can control the viewport width, and maximum scale (depth visitor is allowed to zoom in) for Apple mobile devices with this META tag:
<meta name="viewport" content="width=960px, maximum-scale=1.0" />
Works with Android and other mobile browsing devices, too.
By default iOS browsers supply a set of default screen dimensions, regardless of actual screen res or orientation.
In order to get them to supply #media tags with the actual screen dimensions there is a Meta tag they will obey:
<meta name="viewport" content="width=device-width, initial-scale=1">
If you add this to your page(s) then your #media commands should work with the actual screen resolution of each device. You then have full control with your #media queries
You can then use things like width: 100% to use the actual screen width.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I have a painful issue CSS issue which appears to be caused by the Disqus CSS.
The Disqus CSS seems to cause my page's main content text to randomly change sizes in parts. Clicking refresh will randomly make some text bigger, some smaller and some bold. It only seems to occur in Safari on the iPhone (real and simulator) and is fine in Firefox, IE, Android and iPad Safari. Turning off Disqus comments fixes the issue. I have tried changing Disqus themes and turning mobile view on and off.
Below you can see the same page being rendered differently every time I click refresh (live site-it should look like this)
Any help would be greatly appreciated.
You could try applying the -webkit-text-size-adjust: none; and targeting the Disqus code? If I remember Disqus doesn't use iframes, so it should work if the hierarchy you use is stronger than theirs.
More info here:
http://css-infos.net/property/-webkit-text-size-adjust
Hope that helps :)
Edit: I just had a thought while writing that comment below. You may be able to sort this by setting the viewport width, either explicitly or to device width.
For example, this will make the viewport on an iphone be 320px wide in portrait and 460px wide in landscape (I think that's right?).
<meta name="viewport" content="width=device-width, initial-scale=1">
From the screenshots I think that is actually too small though, so something like this may be better.
<meta name="viewport" content="width=800, initial-scale=1">
This is actually why the text size changes in the first place. The iPhone scales that 800px to fit both portrait and landscape. In portrait though that could make the font far too small so it is increased.
See here for more info: https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
I have built a website that I thought was free from css errors until I test this on the iPhone. I have a strange problem in that the repeating background images do not stretch fully across the page.
This is what it looks like on an iPhone and full website URL:
Example website
Try this: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The problem is the same for if you reduce the width of your browser. The problem is the background IS stretching, but the website is only as wide as the stretched background image. The slidey bit below the logo has a fixed width though and is creating the illusion that the background isn't stretching far enough.
The above code should fix this issue by making sure that the website zooms to fit the width of the browser.
Turn off auto-scaling by setting a viewport meta tag to the head section of your HTML. This sets the width of your page to match the width of the display,
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Sadly adding the viewport to set the zoom to 100% was not what I was looking for.
After debugging further I found that the problem was being caused by the large banner image at the top. This was a larger width than the rest of the website, by changing this to a centered background image and adding overflow hidden to the container fixed all issues.
I asked a question and received an answer regarding sizing images for mobile browsers.
The answer provided works for inline images. However, I need to use background images as part of a header, as well. They're set via css classes. On android, they scale correctly in both portrait and landscape, but on iPhone they automatically zoom in when turning from portrait to landscape. This is a problem. I have a viewport tag set like so:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Apparently when the iPhone (at least the newest versions) are turned to landscape mode, it rescales and zooms in really huge, rather than just repeating the background more times to account for the wider screen.
Here's what my code looks like:
<tr><td colspan="2" class="logoHeader"><img src="/images/mobile/logoCopy.png" /></td></tr>
where class logoHeader looks like this:
td.logoHeader {
background: url(/images/mobile/transparentLeavesRight.png) top right no-repeat,
url(/images/mobile/transparentLeavesGradient.png) top left repeat-x;
text-align:center;
}
Any ideas? I know that I can add the user-scalable property of the viewport meta, but we don't want to prevent users from manually zooming if necessary. We just want to prevent it from automatically zooming when the phone is turned into landscape mode.
FYI: I did search and found this and this, which are pretty much asking the same question. But they're both a number of months old, and neither has an actual answer to the problem, so I'm hoping that someone has come up with something in the interim.
to avoid rescaling when orientation changes try
<meta name='viewport' content='width=1024' />
and adjust width for your needs. If this won't work on android correctly, you can always send different viewport tag by PHP+user agent detection, or set it on device by javascript.
Change the viewport to:
<meta name="viewport" content="width=device-width, initial-scale="selfrender"/>