This has been asked on here before, but it was never resolved, so I decided so see if anyone has figured out how to do this in the past year:
By default, iPhones and Androids will automatically zoom the page to attempt to make it fit nicely in the frame if no viewport meta tag exists. Web sites designed for desktops will be zoomed out so they fit inside the small viewport, but obviously the pixels aren't really represented truthfully.
So, how do I display a full size web page on a mobile browser so that "300px" is actually represented with 300 real pixels on the mobile device's screen?
I know about the meta viewport method, but from what I've been able to tell so far, the pixel ratio used in such cases is 1.5 or 1.0 when the zoom is set to 100% and the width is set to the device_width, and you can detect at what pixel ratio the mobile device is rendering. I don't seem to be able to find some way to explicitly force devices to use only the 1.0 pixel ratio and never the 1.5 pixel ratio.
How do I for a device to use a pixel ratio of 1.0 so that 300 "pixels" as defined in the CSS actually render across 300 pixels on the mobile device's screen? How do I display a web page at its actual truthful size, not with a pixel ratio of 1.5?
Here's an example of what I DON'T want: Currently, if you use the meta tag to set the viewport properties of a mobile browser like this:
<meta name="viewport" content="width=device_display, initial-scale=1.0" />
then that means that the mobile browser will render the page almost exactly like as the page was designed, except that each "pixel" defined in the CSS actually encompasses 1.5 pixels on the device's screen, thus a pixel ratio of 1.5. This 1.5-pixel-ratio convention was set so that designs don't appear to be too small on high-res devices.
I understand that, but I don't want that in my case.
I want a forced pixel ratio of 1.0 ALWAYS and I will handle high-res devices in my own way. How do I force a 1.0 pixel ratio in mobile browsers?
**If there is a way to simply double the pixel ratio that would work as well
I was able to fix this problem for my site using the following code:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Related
I have a question, client needs a mobile website and it has to display pixel perfect on mobile devices (emphasis on iPhone).
I have a .PSD design which is 640px wide.
This website tells me that older iPhones (<= 3) have width of 320px and newer ones (>= 4) have width of 640px.
My question is - how do I make a single page that will display the same on both the older and newer devices?
I know the newer versions have retina display, so do I leave the width and adjust everything to 640px or scale the .PSD down to 320px and adjust everything to that?
Thanks!
You'll need to use a meta viewport tag so that the browser knows to calculate dimensions based on the device. Then define your css classes using percentages (not pixels).
An example looks like this:
<meta name="viewport" content="width=device-width">
And a blog post: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
If you need to load different images for different screen densities, you can try using window.devicePixelRatio to determine the screen density and then use javascript to load the correct image.
http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html
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.
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
Just wondering if anyone else has experienced the iPad/iPhone scaling their background images down to fit the view port.
In my case, I'm swapping out background images via javascript, and the new background images are super wide to fit large displays. However, the iPad is scaling down the background images that are added to the DOM via javascript. I solved this by using "-webkit-background-size" set to the size that the image should be, but this causes the background image to be stretched and pixelated.
This worked for on iPad:
-webkit-background-size: length_x length_y;
The iphoneOS scales every picture with above 2 million pixels (width*height) 50% down.
I managed it with spliting the background into two pictures.
All you have to do is add this meta tag within the of your pages to prevent the background image from being scaled.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
First of all, if you export your image as a 32 bit png (I use Fireworks to do so), and use that png in your background instead of a jpg file, IOS won't scale the image. Works like a charm, and the size is about the same as a jpg with 100% quality (slightly smaller actually)
Also, aditionally for a better experience in ipad / iphone, you should:
a) set a min with do the body tag (mine is usually 980px)
body {
min-width: 980px;
}
b) set the same width to the viewport meta tag
<meta name="viewport" content="width=980px">
Users should now be able to:
- see the design as you have created it
- zoom the content (wich they couldn't if you used "initial-scale=1, maximum-scale=1" on the viewport meta tag)
- change the device landscape to portrait and vice versa with no issues
This is a long shot but I'm hoping there's a way to stop IPhones from resizing a page on load. Problem is if it's a site with a lot of need for refreshing (Say a forum) it gets a little old for users to have to resize that page every refresh.
Is there a way to force Safari/The IPhnone to not minimize the site on refresh that doesn't involve a user changing a setting?
There is a meta tag you can use that will constrain the viewport for the iPhone:
<meta name="viewport" content="width=320" />
From Apple's developer documentation:
Use the viewport meta tag to improve the presentation of your web content on iPhone. Typically, you use the viewport meta tag to set the width and initial scale of the viewport. For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an iPhone-specific web application, then set the width to the width of the device.
There is a constant you can use for the iPhone's device width: width=device-width.
Not sure if this link will work, but you can read more about Mobile Safari and the viewport tag on the Apple Developer website