What resolution is the mobile browser to resolve the mobile Web page

Whether a company project or a collaborative project sometimes requires some mobile web development tasks, such as scanning the QR code or embedded in the client page, and so on.

This article mainly through the investigation of different horizontal resolution of the mobile Device page parsing situation, to give the mobile Web page set width of the proposal.

Before giving the research results, if you are not familiar with mobile web development, please read the "Basics of mobile Web development" first.

As you all know, the horizontal resolution of mobile phones is varied, so we will add a sentence before we write the code:

<meta name= "viewport" content= "Width=device-width" >

This means that the width of the entire browser is equal to the width of the device screen, but after the initialization of this sentence, the width of the browser is really the width of the screen?

In fact, the above statement strictly speaking only for the resolution of 320x480 iOS device, if you write this statement in your Web page, and then add a 320px width of the div, you will find on the iphone 3Gs, this div is 100% full screen

If you have a iPhone4 (screen width of 640px), also loaded on just that page will find that the DIV is also full of the entire screen, according to this meta-statement, the div width should be set to 640px will not fill the right, this is iphone4+ special parsing mechanism

iphone4+ when parsing the Web page still consider itself as a horizontal resolution of 320px device

However, when displayed on the screen, the size will be enlarged by twice times, the previous 320 pixels, the screen will automatically expand to 640, which eliminates the development of two types of Web pages based on two iphones trouble

This makes it very easy to develop mobile Web pages on the iphone, but so far we've just solved a platform problem

Android platform, so, I tested the Android phone browser parsing situation, due to the limitations of the device, I only tested the width of 480 Moto Milestone 2, millet, as well as the width of the Galaxy Nexus 720.

The results are relatively unexpected, this thought millet and other mainstream width of 480px mobile phone dvice-width is 480px, but when I still load the page just now, 320px div very well full of the screen, This seems to be true even if the width of the Android phone 480px is also in accordance with 320px to parse, but the display on the iphone4+ and the different, automatically expand to 1.5 times times.

And then tested the Galaxy Nexus, this phone screen width is 720px, this is also in accordance with the 320px to resolve, but it turns out that it is not, after my debugging, this phone is based on 360px to parse, just is the general 720px.

It seems that, in addition to the screen width of more than 640px of mobile phones, as long as it is less than 640px can be considered in accordance with 320px to parse the Web page, to develop a great convenience. Now 720px mobile phone is relatively small, so you can temporarily only develop 320px width of the page.

Conditions are limited, there is no test width of 540px Android phones, of course, Android also has a width of 240px models, but I was ignored.

Can be the next approximate conclusion:

1. Development of mobile Web pages, not necessary to set the width of the page, just add margin to flexibly adapt to the screen
2. But if there are some plates need to be set width, set to 300px (left and right each left 10px margin)
3. If you need to take into account the high-end models of 720px, you need to write media query in the CSS for different widths of screen-writing styles.

Posted in: Industry docs tagged:android, CSS, HTML, IOS, WebApp, mobile browser, mobile web Post a comment

What resolution is the mobile browser to resolve the mobile Web page