Media queries on mobile devices CSS media queries for mobile device

Now trying to solve the screen resolution problem of Android tablet, the main idea is to use responsive design and media query, found that no matter how much work is used, the workload is very large, debugging is difficult, sad.

CSS's media queries may not be great in traditional Internet pages, but since the popularity of Apple and Android, web development on mobile platforms has become more popular, and CSS media queries have been a big use.

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

About CSS Media queries to learn more, see here

How to use media queries to query:

Media queries are like a CSS selector or if you touch 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 the keyword media, followed by the CSS style you want to display.

(a) The wording of the head tag is as follows:

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

(b) The wording of the stylesheet style sheet is as follows:

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

"Caveats": the above two formulations are for the older iphone solution (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 can use it.

Overriding CSS styles with media queries

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

The following are the main solutions for several devices:

(i) IOS devices

1. IPhone 4

On 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, as is the case with older iphones and ipods. The pixel density on the IPhone 4 is twice as much as the presence of our retina,

It takes twice as much as the size we see in our eyes (the effect of the high-definition icons we usually call) to present on iphone 4 devices. 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 only a browser for the WebKit kernel, so it is not available in other kernel browsers. Here's how to use it:

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

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

3.iPad

You want to use Device-width instead of max-device-width on your ipad, and you can set up 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 amazing and frustrating thing about Android devices is that they support 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. To create a picture of these three effects, you can use the following media query methods:

@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
By the end of this article, the media query for Windows Phone 7 is restricted, see here, on WP7 you can't use Initial-scale, maximum-scale,minimum-scale these attributes, Because the width of 320px is displayed on all WP7 devices. But do not be discouraged, in fact, we can still use the media query on the WP7, as long as 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 pitfalls: there is no good debugging tools, rapid expansion of the market and rapid changes in demand, different devices on different levels of support greatly increased the difficulty of development on mobile devices.