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"/>
Related
I have a CSS layout for a web-based game that was designed to fit the iPad screen only (it's running inside an iPad app). Now I want to port that same game to the iPhone. If I simply run the app using the iPhone 5 simulator, it will just show me a 320x568 section of the screen.
I was wondering if there was a way to (automatically?) shrink down every component on the page to be smaller and fit the iPhone 5's screen. There's lots of images that were designed with the iPad's resolution in mind, so they're bigger than they should be on the iPhone. Can these be resized by the CSS depending on the screen size or would I need to resize them all manually?
In the index.html file I already have included:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
It won't size automatically to the iPhone's screen however. There's also a lot of hardcoded pixel values. Can I simply change those to a percentage that's relative to the screen?
For the record, I didn't write this code, and am not THAT good at CSS. Thank you for your help.
You can checkout this website for help... You can study how to fit a layout as per device size.
http://alistapart.com/article/responsive-web-design
Don't blame if the link expires;-)
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.
My issue is the zoom that occurs when changing the orientation of an iPhone from portrait to landscape. I see this is a pretty well known issue, and there seems to be plenty of documentation on it, but so far, none of the solutions are working for me.
This is my code..
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I'm still getting the zoom issue with this, even though I've seen people post this code as a solution to the problem, and they seem to be getting the desired results, I'm not.
My goal here is to disable zoom, have it scaled at 1.0, and of course, prevent the zoom that occurs when changing orientation.
I would like to avoid using javascript as well.
According to this site, the device-width is always the width in portrait. In other words, the device width will always be 320 on an iPhone.
In the meta tag that you posted, you would need to set the width=device-height to get the intended results in landscape.
While I haven't tackled this problem myself, according to that same link it looks like you will need to use media queries with the orientation.
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'm developing a mobile website for iPhone and Android browsers.
As I was playing around with an Iphone 4 and a HTC Desire I found out that the two devices react differently on orientation change. If I load the website in portrait mode and then rotate the device to horizontal mode, the Iphone zooms closer to the content using the same width (320px). With an Android device, if I rotate it seems that the viewport changes, so there isn't any zooming going on (width >320px), instead the websites gets wider.
My current viewport (I already tried setting a fixed width of 320px):
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
Now my question: Is there a way to make the Android Webkit browser "zoom in" like an iPhone on orientation change from protrait to horizontal?
Thank you very much in advance!
Andrew
This functionality is present on iPhone because of the way the viewport works. Here is how to disabled it on all devices and thus creating the same user experience.
If you set your viewport to this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0," />
then it will prevent the iPhone from "re-zooming" back to device-width. This ALSO disables zoom entirely though. Don't have a better solution at this point.