设置viewpoint和屏幕等宽:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
------------------------------------------------------------------------------------------------------------
主流分辨率:
Android:
主流机型主要为 480x800, 480x854, 540x960, 720x1280, 800x1280 这五种。
(非主流机型还包括:240x320, 320x480, 640x960 这三种,其中两种都与 iPhone 一致。)
iOS:
主流机型主要为 320x480, 640x960, 640x1136,750*1334,1242*2208;
[pad] 1024x768, 2048x1536这五种。
WP:
主流机型主要为 480x800,720x1280, 768x1280 这三种
------------------------------------------------------------------------------------------------------------
使用相对单位:
1、宽、高、填充、边界均使用百分比
2、字体em/rem
em:相对父级,rem(root element):相对根父级,
ps:字体单位一览表(各大浏览器默认字体16px)
------------------------------------------------------------------------------------------------------------
使用 CSS 媒体查询
@media screen and (min-width: 640px){
样式
}
------------------------------------------------------------------------------------------------------------
去掉手持设备点击时出现的透明层:
a,button,input{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }
------------------------------------------------------------------------------------------------------------
去掉input在ios下的默认效果:
input{ resize: none; -webkit-appearance:none;}
------------------------------------------------------------------------------------------------------------
阻止旋转屏幕时自动调整字体大小:
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%;}
------------------------------------------------------------------------------------------------------------
禁止自动对符合电话格式的文本的格式化显示:
<meta name="format-detection" content="telephone=no">
------------------------------------------------------------------------------------------------------------
禁止自动对符合地址格式的文本的格式化显示:
<meta name="format-detection" content="address=no">
------------------------------------------------------------------------------------------------------------