[HTML5] Phone screen resolution and browser resolution

There are similar codes in the use of CSS3

HTML code

1. @media screen and (max-width:480px) {
2. ......
3. ｝

This means that the style of {} is applied on devices with a maximum width of 480px. The width here, note is the resolution of the phone browser, not the screen resolution of the mobile device. For example, Apple's 4 phone screen resolution is 960x640. The resolution of its own Safari browser is 320*480. We can detect the resolution of the browser using the following code:

JS Code

1. $ ("#info"). HTML ("Your browser has a resolution of:" + ($ (document). Width () + "*" +$ (document). Height ()) + ")");

HTML code

1. <div id= "Info" ></div>

On many Android devices, the system comes with a browser, Chrome browser, QQ browser, UC, etc., the value of the test is not the same. This brings complexity to the development of mobile web. Testing will also be different in a desktop browser.

When we do web development for mobile phones, we usually include them in the head:

HTML code

1. <meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" >

The device-width here is also the width of the browser used by the value, not the phone itself.

Please advise me if you are wrong.

====================== Split Line ===========================

Useful JS Detection code:

JS Code

2. /*
6. * Smartphone browser version information:
10. *
14. */
18. var browser = {
22. Versions:function () {
26. var u = navigator.useragent, app = Navigator.appversion;
30. return {//Mobile terminal browser version information
34. Trident:u.indexof (' Trident ') >-1,//ie core
38. Presto:u.indexof (' presto ') >-1,//opera core
42. Webkit:u.indexof (' AppleWebKit ') >-1,//Apple, Google kernel
46. Gecko:u.indexof (' Gecko ') >-1 && u.indexof (' khtml ') = =-1,//Firefox kernel
50. Mobile:!! U.match (/applewebkit.*mobile.*/) | | !! U.match (/applewebkit/),//Whether it is a mobile terminal
54. Ios:!! U.match (/(i[^;] +;( U;)? Cpu.+mac OS X)/),//ios terminal
58. Android:u.indexof (' Android ') >-1 | | U.indexof (' Linux ') >-1,//android terminal or UC Browser
62. Iphone:u.indexof (' IPhone ') >-1 | | U.indexof (' Mac ') >-1,//whether for iphone or Qqhd browser
66. Ipad:u.indexof (' ipad ') >-1,//whether ipad
70. Webapp:u.indexof (' Safari ') = =-1
72. Whether the web should program, no head with the bottom
76. };
80. }(),
84. Language: (Navigator.browserlanguage | | navigator.language). toLowerCase ()
88. }