Media queries on mobile devices CSS media queries for mobile device

Now trying to solve the screen resolution problem of the Android tablet, the main idea now is to use responsive design and media queries, found that regardless of the use of that way, the workload is very large, debugging is difficult, sad.

CSS media Query Although the scope of the traditional Internet page may not be very large, but since the popularity of Apple and Android, mobile platform Web development has become more and more popular, the same time the CSS media query is very useful.

The following is a translation of the content, the original text from a great article here

About CSS media queries want to know a lot of other, see here

How to use media queries to query:

A media query is like a CSS selector or if you have access to a database, it's like a SQL query statement. Media query is actually a kind of language regulation

, you can easily get a few elements from a whole bunch of elements. This makes it easier for you to deal with specific dimensions or to designate special solutions. Media

The code of the query can be placed in the

Queries must start with Keywordmedia, followed by the CSS style you want to display.

(a) The wording of the head tag such as the following:

<link rel= "stylesheet" type= "Text/css" href= "Xxx.css" media= "only screens and (max-device-width:480px)" >

(ii) The wording of the stylesheet style sheet such as the following:

@media only screen and (max-device-width:480px) {/*css style */}

"Caveats": both of the above are written to address the old iphone (320x480 solution). Of course, it doesn't mean you have to use two of them,

Just pick the one that suits your needs and you'll be able to use it.

Overriding CSS styles with media queries

This method of use is used on mobile devices and is often used mainly for rendering high definition images. In other words, now we have a picture that is twice as large as the display size, but the area that can be displayed is only half the picture. The solution is to make use of the media queries and background-size mentioned above.

The following are the main ways to solve the following devices:

(i) IOS devices

1. IPhone 4

IPhone4 you can't use Device-height or device-width to set the conditions for media queries, because IPhone4 's screen size is also 320x480, the iphone and ipod are the same as the older version. The pixel density on the IPhone 4 is twice as much as the presence of our retina,

To present on the iphone 4 device is twice as much as the actual size of the image we see in our eyes (that is, the effect of the high-definition icons we usually call). To achieve this effect, you cannot use the height or width, and the attribute is used to-webkit-min-device-pixel-ratio this property. However, it is important to note that this is a browser for the WebKit kernel, so it is not available in other kernel browsers. Usage such as the following:

@media only screen and (-webkit-min-device-pixel-ratio:2) {/* CSS style for iphone4 */}

2. IPhone 3 and IPod (320x480 pixel resolution)
@media only screen and (max-device-width:480px) {/* CSS style for iphone 3 and ipod */}

3.iPad

Use Device-width instead of max-device-width on ipad and be able to set horizontal and vertical screen modes
@media only screen and (device-width:768px) {/* CSS style for ipad */}

@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) {/* CSS style for ipad vertical screen */}

@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (Orientation:landscape) {/* CSS style for ipad horizontal screen */}

(ii) Android devices

The most bizarre and frustrating part of Android devices is the support for too many screen sizes. In a sense, it must be a good thing for manufacturers of handheld devices, but it can be hard for graphic designers. Designers have to do a few sizes of pictures to meet the most popular needs. Of course, this is where interest lies. To make a long story short, you can create three images of different densities on Android devices: Low, media, and high. Images that create these three effects can use media queries such as the following:

@media only screen and (-webkit-device-pixel-ratio:.75) {/* Low resolution small size picture style */}
@media only screen and (-webkit-device-pixel-ratio:1) {/* General resolution normal size picture style */}
@media only screen and (-webkit-device-pixel-ratio:1.5) {/* High resolution large size picture style */}

(iii) Windows Phone 7
To this article, Windows Phone 7 media query is restricted, see here, on WP7 you can not use Initial-scale, maximum-scale,minimum-scale these attributes, Because the width of 320px is displayed on all WP7 devices. But don't be discouraged, in fact we can still use the media query on the WP7, just for example, the following wording can be:

<!--[if Iemobile 7]><link rel= "stylesheet" type= "Text/css" href= "xxx.css" media= "screen" ><! [endif]-->

Conclusion:
Writing CSS on mobile devices is very complex and changeable, and this is not to be questioned. Because there are a lot of traps: there is no very good debugging tools, rapid expansion of the market and demand for high-speed changes, different devices on different levels of support greatly added to the mobile device development difficulty.

Media queries on mobile devices CSS media queries for mobile device