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
Related
Why is the iPhone 5 displaying a mobile responsive site design when the phone's screen width (1136 x 640px landscape) can fit a website that is 1000px in width?
Shouldn't the iPhone 5 just be showing the desktop version as it has a large screen resolution that is big enough for the website?
Example site
When I resize a desktop browser to less than 1136px width the mobile responsive version doesn't show (the normal desktop design shows) which suggests that media queries are not in use at this size.
On retina screens, pixels are not points. So although you may think the resolution is higher; the actual landscape resolution of an iPhone 5 is 568x320.
Although distances are measured in px in web development, this does not translate into actual pixels on a retina device, where two physical pixels represent a point on the screen which is equivalent to a px in your CSS.
I'm currently developing a "mobile version" of a website that is primarily targeting more current iPhones (4+), it's my first time doing this. I'm testing on an iPhone 4S, my understanding is that the screen resolution of that device is 640x920 (when held in "portrait" orientation). I have everything on the site within a 600px wide container, although when I view it on the phone it seems to display by default in a "zoomed out" state, being that I can still see something like 1000-1200 pixels of content on the screen.
I assume that the iPhone displays sites in this way as many are not built to adapt to it's smaller resolution? Is there something I'm missing here? Is there something I set to tell the device to display the site at it's actual resolution?
You need to add a viewport meta tag in your html head.
<meta name="viewport" content="width=device-width">
That tells the browser that the viewport (virtual width) should be set to the device width (physical width).
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">
I'm building an iphone version of a website and was curious of the best practices for choosing image sizes. I'm making a simple vertical column of images text. I originally thought that 300px would be the best size (320px portrait mode minus 10px margin each side). However when user rotates to landscape the images will now seem blurry & upscaled. The alternative is to make the images larger, but then in portrait mode they will all need downscaling- does this make the page load slower? I assumed most people view in portrait.
If I go with landscape/480px as the base size what viewport meta should I use to get it to size down for portrait? My current viewport meta tag is :
<meta name="viewport" content="user-scalable=no, width=device-width" />
Many thanks in advance
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