Web Design for Smart Phone - Pixel Size

Web Design for Smart Phone - Pixel Size

List of pixel density for devices:
http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/ your problem is probably the change in ratio.

Here is a nice article covering some responsive research which I personally like to reference

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Skipping to the end; the iPhone 4 Retina display for example is double the pixel density and here is an example from the above article of targeting it (haven't tested)
http://thomasmaier.me/blog/2010/06/23/css-for-iphone-4-retina-display/

and another article giving a bit of info on having to make 2 images with different ppi
http://bjango.com/articles/designingforretina/

I personally use Twitter's Bootstrap & its Responsive plugin for the layout of the design using CSS:
http://twitter.github.com/bootstrap/scaffolding.html#responsive

Is there a standard webpage resolution for mobile phones?

320 by 480 is the common screen resolution for new mobile devices.

iPhone Website Compatibility

Android Display Metrics

That being said if you want to support the majority of mobile devices, you may want to support multiple resolutions.

Mobile web: how to get physical pixel size?

What you want is to check the device's pixel density - measured in DPI - as @Smamatti already mentioned you control this with CSS media queries.

Here's an article on how to cope with varying DPIs and screen sizes, using those CSS media queries.

UPDATE: here's the javascript function (from the above link) that uses a trick to figure out the current device DPI:

function getPPI(){
// create an empty element
var div = document.createElement("div");
// give it an absolute size of one inch
div.style.width="1in";
// append it to the body
var body = document.getElementsByTagName("body")[0];
body.appendChild(div);
// read the computed width
var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
// remove it again
body.removeChild(div);
// and return the value
return parseFloat(ppi);
}

Hope this helps!

What size should my images be for a mobile site

The iPhone 4S/5 has a high-resolution screen that's 640 pixels wide. Many Android smartphones top out at 720px wide, although some go up to 800px. Anything over that is probably considered a tablet.

The best thing you can do as far as wide compatibility, then, is a single CSS style:

img { max-width: 100%; height: auto; }

This will ensure that no matter what resolution the screen is, your images will be no larger than the element containing it. (When building a responsive site with mobile users in mind, your element widths, margins and padding should all be computed as percentages whenever possible.) Obviously it also means that you're downloading more image data than many phones will need, but if you're dealing with two-color logos, it's not much of a difference. As always, keep your images as few and as small as possible.

In addition, if you're not dealing with photos, you should look at SVG images. Since they're vector-based, they resize perfectly at any resolution, and they're compatible with pretty much every browser except IE8 and Android 2.x.

Is 480px screen width a legitimate design target for mobile web applications in late 2009?

That's not unreasonable. The main issue I see is that 480px is the width only in landscape orientation, not in the (sometimes default) portrait. I know that it is not a big deal these days to rotate one's phone, but this is something to think about.

Resolution of smartphone browsers

In my experience, most of the time you can get the results you want if you structure everything correctly and just focus on device width.

Device width is a true measure of the pixels on the smartphone or tablet, figures for resolution are typically double for retina devices.

Structuring correctly means:

(1) In the head of your doc include your meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

optionally you could prevent zooming with

<meta name="viewport" content="width=device-width, user-scalable=no" />

(2) In your CSS use media queries like

@media (max-width: 480px) {
...
}

@media (max-width: 767px) {
....
}

@media (min-width: 768px) and (max-width: 979px) {
...
}

@media (min-width: 1200px) {
...
}

The break points you choose aren't so important but rather the prinicple that you are manipulating the on-screen display based on pixel widths and not complicating your life with pixel ratios, resolution, orientation and other related details.

For sure you will encounter exceptions but if you start simple and it gets the results you want, then you avoid the slippery slope of trying to target devices, and it helps future-proof your design.

Good luck!

what's the actual screen resolution of mobile devices

Device width (value your browser sees and you use in media queries) is not "width - 160", it is "physical width / device pixel density". Your phone's is 150%, so it is 480 / 1.5 = 320.

For nice overview of common screen resolutions of mobile phones I'd suggest http://screensiz.es/phone.

Responsive CSS with high-res smart phones and tablets

The “pixels” that are used in CSS declarations and when the browser reports the screen size of the client device have nothing to do with the actual real-world pixels on a device's screen. The “pixels” that are used in CSS are essentially an abstract construct created specifically for us web developers. To concern your self with the actual amount of real-world pixels on a high-resolution mobile screen is, for most web applications, completely unnecessary and will only lead you to utter madness.

You can determine the browser and device type by inspecting the navigator.userAgent property in JavaScript. For example, to test for (practically) any mobile device:

 // if mobile === true, 99% chance the device is mobile.
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));

You can of course inspect navigator.userAgent to determine if the user is on a specific type of device or browser that you are particularly concerned about or having a problem with.

But again, in my personal experience, clever, simple, and flexible responsive CSS design (supported by media queries and JavaScript, too, of course) will render beautifully on 99% of device/browser combinations without having to resort to inspecting navigator.userAgent to create different styles for individual devices.



Related Topics



Leave a reply



Submit