Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

Part 7.2Tablet and smartphone friendly CSS

Part 7.2Tablet and smartphone friendly CSS

Developing a website for all is very important in the modern era of computing. One part of computing that became a huge part of the web is smartphone and tablet computing. Before the release of the iPhone in 2007, mobile phones (known as feature phones) were very rarely used for web browsing.

When the smartphone became the norm and feature phones a thing of the past, the mobile web became the largest source of internet traffic on a large proportion of websites.

This cannot be ignored in the development of a website.

Smartphones

Smartphones are much simpler than tablets to build websites for because tablets are so close to desktops that distinguishing them can be difficult.

Smartphones are relatively small devices and the normal media query for a smartphone is:

CSS
@media screen and (max-width:767px)
		

As well as looking at width, it is possible to observe the height of the device. Most smartphones the height is less than 600 pixels so the query could extend to:

CSS
@media screen and (max-width:767px) and (max-height:599px)
		

It may be better to look for max-device-height than just the max-height as shown above.

The iPhone 4 introduced a retina display that achieved a 326 pixels-per-inch resolution and while the resolution of the iPhone 4 is 960 by 640 pixels, it is reported in CSS as being the same 480 by 320 pixels as the iPhone 3GS before it. This makes it easier than working with different resolutions and PPIs.

Tablets

With tablets, the sizing is not much different.

For the majority of tablet devices, the maximum width is 1024 pixels in landscape mode and 768 pixels in portrait mode.

CSS
@media screen and (min-width:768px) and (max-width:1023px)
		

This media query will ensure that all tablet devices fall between the range, thus leaving only one more device.

Desktops

The term desktop refers to all other devices that are larger than 1023 pixels in width which for the majority of cases includes desktop computers and notebook computers.

The media query used for all other devices is:

CSS
@media screen and (min-width:1024px)
		

Using the media queries

The media queries can be used in the same file, but browsers that do not support media queries may simply ignore all CSS in the queries. To solve this, make general CSS and override it with the media queries.

CSS
#page {
	width: 100%;
}
@media screen and (max-width:767px) {
	#page {
		width: 500px;
	}
}
		

This completely solves the problem of browsers which do not support media queries.

Feedback 👍
Comments are sent via email to me.