Mobile WEB development ilk layout - Study Notes

A mobile base end

1. Status of the browser
current mobile phone browsers are based on Webkit kernel modifications over the compatible mobile end mainstream browsers, Webkit-browser can handle.
2. The status of the phone screen
mobile end device's screen size is very large, serious fragmentation.
As a developer without paying attention to these resolutions, because we used the size of the unit is px.
3. The method of debugging a mobile terminal

• Chrome DevTools (Google Chrome) debugging of analog phones
• Up a local web server, mobile and server within a LAN, server access through mobile phones
• Use external network server, direct IP or domain names

Second, the viewport

视口（viewport）就是浏览器显示页面内容的屏幕区域。
 视口可以分为布局视口、视觉视口和理想视口

1. layout viewport layout viewport
general mobile device's browser by default set up a layout viewport to address the problem of early PC side of the page displayed on the phone. iOS, Android will be the basic viewport resolution is set to 980px, so most of the pages on the PC can be presented on the phone, but the elements seem small, general default can be manually zoom the page.

2. visual viewport visual viewport
literally, it is an area that the user is seeing the site. Note: is the area of the site.
We can zoom to operate the visual viewport, but will not affect the layout viewport, the layout viewport remains of the original width.

3 over the viewport ideal viewport
in order to make the mobile terminal have the best site browsing and reading width is set;
over the viewport, in terms of equipment, is the ideal size of the viewport manually Tianxie meta viewport label, notice browser operation.
The main purpose of the viewport meta tag: the layout viewport width should match the width of the ideal of the viewport, simple to understand how wide the equipment, we will layout viewport wide.

4. meta viewport label

 <meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Attributes	explain
width	The width of the viewport width is provided, it may be provided a special device-width value
initial-scale	Initial zoom ratio greater than 0
maximum-scale	The maximum zoom ratio, a number greater than 0
minimum-scale	Minimum zoom ratio greater than 0
user-scalable	Whether the user can zoom, yes or no (1 or 0)

The standard settings viewport

• The viewport and apparatus consistent with
• The default viewport scaling 1.0
• Do not allow user-zoom
• The maximum allowable scaling 1.0
• Minimum allowed scaling 1.0

Third, twice map

1. Physical & physical pixels than pixels

• Refers to a physical pixel screen display of the smallest particles, it is physically real.

• We develop time 1px not necessarily equal a PC-side page of physical pixels, a pixel px is equal to a physical, but it is not the same mobile terminal can display the number of pixels in a physical px, called physical pixel ratio or screen pixel ratio.
  For example: Apple physical pixel bit 6 is 2.0, i.e. 1px can display two physical pixels on the phone.

• PC side and the earlier phone screen / general phone screen: 1CSS physical pixel = 1 pixel.

• The Retina (retinal screen) is a display technology that will compress more physical pixels to a screen where, to achieve higher resolution, and to improve the degree of detail displayed.

Figure 2 times
for a picture 50px * 50px, and the phone is open Retina screen, the magnification ratio will follow the physical pixel earlier, this will cause a blurry picture
in the standard viewport settings, the use of double graphs to improve picture quality , resolve ambiguities in high-definition equipment.
First picture to enlarge, shrink again, solved in the device picture ambiguity

    <style>
        /* 我们需要一个50*50像素（css像素）的图片 直接放到我们的iphone8 里面会放大2倍  100* 100 就会模糊 */
        /* 我们采取的是 放一个 100* 100 图片  然后手动的把这个图片 缩小为 50* 50 （css像素） */
        /* 我们准备的图片 比我们实际需要的大小 大2倍，这就方式就是 2倍图 */
        
        img:nth-child(2) {
            width: 50px;
            height: 50px;
        }
    </style>
<body>
    <!-- 模糊的 -->
    <img src="images/apple50.jpg" alt="">
    <!-- 我们采取2倍图 -->
    <img src="images/apple100.jpg" alt="">
</body>

3. Background-size scaling background
background-size attribute of a predetermined size of the background image

background-size: 背景图片宽度 背景图片高度;

Unit: length | percentage | Cover | Contain;
Cover the background image expanded to be large enough to completely cover the background image so that the background region.
expanded to contain the maximum image size, width and height so as to fully adapt the content area

Fourth, the development of the mobile terminal selection

1. Create a separate page the mobile terminal (main)
Normally, in front of the URL domain plus m (mobile) movement end can be opened. By determining device, if the mobile device is opened, the movable end jump page.

• Fluid layout (layout percentage)
• flex elastic layout (highly recommended)
• less + rem + media queries layout
• Hybrid layout

2. pages compatible mobile terminal responsive
to the change pattern determined by the width of the screen, to adapt to different terminals, disadvantages: the production problems, requires a significant effort to adjust compatibility issues.

• Media Inquiries
• bootstarp

Fifth, mobile end technology solutions

1. Move the client browser
mobile client browser to basic webkit core, hence we consider webkit compatibility issues.
We can rest assured that the use of H5 tags and CSS3 style. At the same time private prefix our browser we only need to consider adding webkit.
2. CSS initialization normalize.css
mobile terminal CSS initialization recommended normalize.css /
Normalize.css: protecting valuable defaults
Normalize.css: Fixed bug browser
Normalize.css: modular
Normalize.css: It has detailed documentation
3 CSS3 box model box-sizing

• Traditional modes width calculation: width of the box = CSS set width + border + padding, padding and border
  does not stretch the box.
• CSS3 box model: width of the box = CSS set width width which includes the border and padding
  is to say, our box model in CSS3, padding and border does not support a big box.

/*CSS3盒子模型,默认*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;

4. The special style

/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/ 
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
 -webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

V. flow arrangement

• Flow layout, that is, the percentage of layout, also known as non-fixed pixel layout.
• Set by the width of the box to be a percentage of the width of the screen expands and contracts in accordance with, the pixel is not fixed limits, the content is filled on both sides.
• Flow layout mode mobile web development using the more common layout.

/*用宽高用百分比*/
     div {
            float: left;
            width: 50%;
            height: 400px;
      }

• max-width maximum width (max-height maximum height)
• min-width minimum width (min-height minimum height)

1. Set the viewport label and introduced initialization pattern

<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

2. The common style initialization

body {
margin: 0 auto;
min-width: 320px;
max-width: 640px;
background: #fff;
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serif;
line-height: 1.5;
color: #666;
}