搜索
移动web开发资源总结一、meta标签相关知识1、移动端页面设置视口宽度等于设备宽度，并禁止缩放。metaname=viewportcontent=width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no/2、移动端页面设置视口宽度等于定宽（如640px），并禁止缩放，常用于微信浏览器页面。metaname=viewportcontent=width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no/3、禁止将页面中的数字识别为电话号码metaname=format-detectioncontent=telephone=no/4、忽略Android平台中对邮箱地址的识别metaname=format-detectioncontent=email=no/5、当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safarimetaname=apple-mobile-web-app-capablecontent=yes/!--ios7.0版本以后，safari上已看不到效果--6、将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式metaname=apple-mobile-web-app-status-bar-stylecontent=black/!--可选default、black、black-translucent--viewport模板!DOCTYPEhtmlhtmlheadmetacharset=utf-8metacontent=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=noname=viewportmetacontent=yesname=apple-mobile-web-app-capablemetacontent=blackname=apple-mobile-web-app-status-bar-stylemetacontent=telephone=noname=format-detectionmetacontent=email=noname=format-detectiontitletitle/titlelinkrel=stylesheethref=index.css/headbodycontent.../body/html二、CSS样式技巧1、禁止ios和android用户选中文字.css{-webkit-user-select:none}2、禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片.css{-webkit-touch-callout:none}3、webkit去除表单元素的默认样式.css{-webkit-appearance:none;}4、修改webkit表单输入框placeholder的样式input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;}5、去除androida/button/input标签被点击时产生的边框&去除iosa标签被点击时产生的半透明灰色背景a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}6、ios使用-webkit-text-size-adjust禁止调整字体大小body{-webkit-text-size-adjust:100%!important;}7、android上去掉语音输入按钮input::-webkit-input-speech-button{display:none}8、移动端定义字体，移动端没有微软雅黑字体/*移动端定义字体的代码*/body{font-family:Helvetica;}三、其他技巧1、手机拍照和上传图片!--选择照片--inputtype=fileaccept=image/*!--选择视频--inputtype=fileaccept=video/*2、取消input在ios下，输入的时候英文首字母的默认大写inputautocapitalize=offautocorrect=off/3、打电话和发短信ahref=tel:0755-10086打电话给:0755-10086/aahref=sms:10086发短信给:10086/a四、CSSreset/*hcysun*/@charsetutf-8;/*reset*/html{-webkit-text-size-adjust:none;-webkit-user-select:none;-webkit-touch-callout:nonefont-family:Helvetica;}body{font-size:12px;}body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0;padding:0;font-weight:normal;text-indent:0;}a,button,input,textarea,select{background:none;-webkit-tap-highlight-color:rgba(255,0,0,0);outline:none;-webkit-appearance:none;}em{font-style:normal}li{list-style:none}a{text-decoration:none;}img{border:none;vertical-align:top;}table{border-collapse:collapse;}textarea{resize:none;overflow:auto;}/*endreset*/五、常用公用CSSstyle/*public*//*清除浮动*/.clear{zoom:1;}.clear:after{content:'';display:block;clear:both;}/*定义盒模型为怪异和模型（宽高不受边框影响）*/.boxSiz{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;}/*强制换行*/.toWrap{word-break:break-all;/*只对英文起作用，以字母作为换行依据。*/word-wrap:break-word;/*只对英文起作用，以单词作为换行依据。*/white-space:pre-wrap;/*只对中文起作用，强制换行。*/}/*禁止换行*/.noWrap{white-space:nowrap;}/*禁止换行,超出省略号*/.noWrapEllipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}/*文字两端对齐*/.text-justify{text-align:justify;text-justify:inter-ideograph;}/*定义盒模型为flex布局兼容写法并让内容水平垂直居中*/.flex-center{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-o-box;display:box;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-o-box-pack:center;box-pack:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-o-box-align:center;box-align:center;}/*publicend*/六、flex布局1、定义弹性盒模型兼容写法/*boxinline-box*/display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-o-box;display:box;2、box-orient定义盒模型内伸缩项目的布局方向/***verticalcolumn垂直*horizontalrow水平默认值*/-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-ms-flex-direction:row;-o-box-orient:horizontal;box-orient:horizontal;3、box-direction定义盒模型内伸缩项目的正序(normal默认值)、倒叙(reverse)/*Firefox*/display:-moz-box;-moz-box-direction:reverse;/*Safari、Opera以及Chrome*/display:-webkit-box;-webkit-box-direction:reverse;4、box-pack对盒子水平富裕空间的管理/*startendcenterjustify*/-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-o-box-pack:center;box-pack:center;5、box-pack对盒子垂直方向富裕空间的管理/*startendcenter*//*box-align*/-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-o-box-align:center;box-align:center;6、定义伸缩项目的具体位置/*-moz-box-ordinal-group:1;*//*Firefox*//*-webkit-box-ordinal-group:1;*//*Safari和Chrome*/.boxdiv:nth-of-type(1){-webkit-box-ordinal-group:1;}.boxdiv:nth-of-type(2){-webkit-box-ordinal-group:2;}.boxdiv:nth-of-type(3){-webkit-box-ordinal-group:3;}.boxdiv:nth-of-type(4){-webkit-box-ordinal-group:4;}.boxdiv:nth-of-type(5){-webkit-box-ordinal-group:5;}7、定义伸缩项目占空间的份数-moz-box-flex:2.0;/*Firefox*/-webkit-box-flex:2.0;/*Safari和Chrome*/.boxdiv:nth-of-type(1){-webkit-box-flex:1;}.boxdiv:nth-of-type(2){-webkit-box-flex:2;}.boxdiv:nth-of-type(3){-webkit-box-flex:3;}.boxdiv:nth-of-t