最近工作比较忙，加上也比较懒于梳理，文章的更新进度也慢了很多。
我们一般在写HTML5移动页面的时候会进行一些基本的初始化。
HTML方面：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" /> <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"> <meta content="telephone=no" name="format-detection" /> <!-- UC手机浏览器默认竖屏、强制全屏 --> <meta name="full-screen" content="yes"/> <meta name="browsermode" content="application"/> <!-- QQ手机浏览器强制竖屏、强制全屏 --> <meta name="x5-orientation" content="portrait"/> <meta name="x5-fullscreen" content="true"/> <meta name="x5-page-mode" content="app"/> |
默认样式重置：
1、-webkit-tap-highlight-color
-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0，去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)。
2、outline：none
(1)在pc端为a标签定义这个样式的目的是为了取消ie浏览器下点击a标签时出现的虚线。
(2)input，textarea{outline:none} 取消chrome下默认的文本框聚焦样式。
(3)在移动端是不起作用的，想要去除文本框的默认样式可以使用-webkit-appearance，聚焦时候默认样式的取消是-webkit-tap-highlight-color。看到一些移动端reset文件加了此属性，其实是多余。
3、-webkit-appearance
-webkit-appearance: none;//消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 。不同type的input使用这个属性之后表现不一。text、button无样式，radio、checkbox直接消失。
4、-webkit-user-select
-webkit-user-select: none; // 禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整
5、-webkit-text-size-adjust
-webkit-text-size-adjust: none; //禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化)，此属性也不继承，一般加在body上规定整个body的文字都不会自动调整
6、-webkit-touch-callout
-webkit-touch-callout:none; // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加
7、-webkit-overflow-scrolling
-webkit-overflow-scrolling:touch;// 局部滚动(仅iOS 5以上支持)
CSS重置参考：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@charset "UTF-8"; html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} *{tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-tap-highlight-color:rgba(0,0,0,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;} html{-webkit-tap-highlight-color:transparent;height:100%;min-width:320px;overflow-x:hidden} body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;line-height:1;color:#333;background-color:#f0efed} input,textarea{outline:0;resize:none;} a{color:#2bb2a3;text-decoration:none;outline:0} a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} a:active,a:hover{outline:0} button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0} button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer} table{border-collapse:collapse;border-spacing:0} td,th{padding:0} img{vertical-align:middle;border:0} @-ms-viewport{width:device-width} input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit} ol,ul{list-style:none;} blockquote,q{quotes:none;} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;} |
仅供参考，有一些可以在自己的项目中酌情添加使用。
写得比较粗糙。感觉还有很多要写的，比如响应式等。后面我会继续完善并添加关于在移动开发过程中调试的内容。暂记到此，给小盆友泡奶粉先^_^