html is worth saying that should fit
! ! Phone adapter with simultaneous presence of
A write page is opened in the mobile terminal, will find this page show little, it is because the width of the viewport apparatus viewport is not equal to the width of the device device-width, and the page is displayed in accordance with the width of the viewport, a mobile phone generally the viewport is 980px, 350px width and equipment
If the measured width of the phone viewport it, write the width of a red background color of the div width and a red background color for div 350px 980px, and the computer is on, and then tap the phone debugging, you will find a 980px div probably filled, and only a third of 350px
That you see in a 350px 980px of a page, of course, will look very small, and there is all these years of mobile phone replacement has twice the pixels, three times the pixel screen, but in fact the device width is not changed
How to make the viewport equal to the width of the device, write a meta tag on the line, written in the head tag
- width viewport width (Numerical / device-width)
- height viewport height (value / device-height)
- initial-scale initial scale
- maximum-scale maximum zoom ratio
- minimum-scale minimum scale
- user-scalable whether to allow the user zooms (yes / no)
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">Check again after write this code of 980px and 350px div, will find that content becomes large, and filled the 350px, 980px overflowed, and the font size is normal, this is telling us is the best in the width of the mobile terminal tag proportional, block-level tag default is 100 per cent == remember not to let cell phone end users == horizontal slide, after the phrase written on the adapter, the text on the use of 16px, 14px is the normal size of the phone's display properly
Senior some adaptation, rem adaptation, the talk in the css
Other meta
// utf-8 不解释
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<meta name="format-detection" content="telphone=no, email=no" />
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 设置苹果工具栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />