Hi there,
With regard to point three I just wanted to elaborate a little on what NightStalker said:
As you probably know, width is the width of the browser viewport, whereas device-width is the width of the device's screen.
However, please also bear in mind that width is measured in CSS pixels, whereas device-width is measured in device pixels. The latter value (device-width) does not change on a device and thus cannot be used to switch style sheets or CSS directives as the screen is rotated or resized.
If you're interested, you can try this out:
This example is for an iPhone3 (or any other device with a 320px device width), but you can tailor it to suit.
Here, the colour of the heading will change as you rotate the device from landscape to portrait:
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>Responsive demo width</title>
<style>
@media screen and (max-width : 320px) {
h1 {color: blue};
}
@media screen and (min-width : 321px) {
h1 {color: red};
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
In this example, it doesn't matter how you hold your phone, the device width is constant (320px) and the second rule will never be applied:
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>Responsive demo device-width</title>
<style>
@media screen and (max-device-width : 320px) {
h1 {color: blue};
}
@media screen and (min-device-width : 321px) {
h1 {color: red};
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
In short:
You are going to be a lot more flexible using min-width and max-width, as it will adapt to screen size on the fly.
You might consider using device-width if you are just trying to target small devices with a separate stylesheet.
There's a really good video by PPK (and also an article) which goes into more detail.[/QUOTE]
Reply With Quote
Originally Posted by DrQuincy
Bookmarks