Media queries mobile device Style

Media queries mobile device Style

This section introduces a new style technology. The media queries style module allows you to customize different la s of website pages based on the screen size of mobile devices. Its advantage is that developers only need to implement a set of pages to access different website effects in browsers on all platforms.

Display problems of traditional websites on iPhone

Before introducing the media queries knowledge, let's take a look at the page display effects of a traditional website on various mobile devices.

First, Figure 6-1 shows the traditional Google homepage website under the iPhone Safari browser.

 

 

As shown in Figure 6-1, many parts of the content on the webpage are reduced by the actual size of the browser. Why is this effect?

In fact, when using the Safari browser in the iPhone to browse traditional web sites, the Safari browser can display the content of the entire page on the page, A Virtual Layout window with 980px width is created on the screen, and the webpage is displayed according to the size of the window with 980px width. In this way, the effect we see is like Figure 6-1, and the webpage can be zoomed in or out.

In the past, in order to adapt to different display resolution sizes, when designing a website or developing a set of websites, the minimum resolution of 800 '600 is usually used as the basis of the page size, in addition, it does not consider page sizes that adapt to the screen size of mobile devices.

However, the resolution of the iPhone is 320 '480. For websites with the lowest resolution, the Access Effect in the iPhone's Safari browser is still so bad. So, are there any traditional Web websites that can't be normally displayed on mobile devices with small screens such as the iPhone? The answer is yes.

Now let's take a look at how Google converts the homepage of a traditional website into a mobile homepage, as shown in 6-2.

 

 

 

After the Google homepage is converted to a mobile version, the content on the entire page is clearly visible. The style of the page is different from that of the traditional website. How does Google transform traditional websites into mobile websites? At the same time, What do other complex website styles need to be changed to a mobile version?

To implement the above functions, we need to use the viewport and media queries style modules on the HTML page.

Next we will introduce how to use these two technical knowledge points.

Viewport settings adapt to the screen size of mobile devices 1. What is viewport

Apple specifically defines the viewport virtual window to solve the screen resolution problem of mobile safari. It allows developers to create a virtual window (viewport) and customize its window size or zoom function.

If the developer does not define this virtual window, the mobile safari virtual window size is 980 pixels by default. Now, besides safari, other browsers also support viewport virtual Windows. However, the default viewport window size supported by different browsers is inconsistent. The default values are as follows:

The default value of the android browser is 800 pixels;

The default value of IE is 974 pixels;

Operabrowser's default value is 850 pixels.

2. How to Use viewport

The viewport virtual window is defined in the meta element. Its main function is to set the web page to adapt to the screen size of mobile devices.

Run the following code:

<Meta name = "viewport" content = "width = device-width,

Initial-scale = 1, user-scalable = 0 "/>

The main function of this Code is to customize the virtual window, and specify the width of the virtual window as device-width, and the initial zoom ratio is doubled. Manual Zoom is not allowed.

In the above Code, we use a special name: Device-width. Since the iPhone was launched, its screen resolution has remained at 320 '480. Because Apple basically uses width = when adding viewport
The expression of device-width indicates the actual resolution width of the iPhone screen, for example, width = 320. Therefore, other browser vendors are compatible with the features such as device-width when implementing their viewport.

Three parameters are defined in the content attribute in the code. In fact, the content attribute allows you to set six different parameters:

Width specifies the screen width of the virtual window.

Height specifies the screen height of the virtual window.

Initial-scale specifies the initial scaling ratio.

Maximum-scale specifies the maximum scale allowed for user scaling.

Minimum-scale specifies the minimum scale allowed for user scaling.

User-scalable specifies whether manual scaling is allowed.

 

 

 

This article is excerpted by Tang Jun from HTML5 mobile Web Development Guide

Book details: http://blog.csdn.net/broadview2006/article/details/7609750