手机触屏版页面开发总结

设置viewpoint和屏幕等宽:

------------------------------------------------------------------------------------------------------------

主流分辨率:

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)


手机触屏版页面开发总结_第1张图片

------------------------------------------------------------------------------------------------------------

使用 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%;}

------------------------------------------------------------------------------------------------------------

禁止自动对符合电话格式的文本的格式化显示:


------------------------------------------------------------------------------------------------------------

禁止自动对符合地址格式的文本的格式化显示:


------------------------------------------------------------------------------------------------------------

你可能感兴趣的:(手机触屏版页面开发总结)