一、meta标签的相关知识
1、移动端页面设置视口宽度等于设备宽度,并禁止缩放。
1 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
2、移动端页面设置视口宽度等于定宽(如640px),并禁止缩放,常用于微信浏览器页面。
1 <meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
1 <meta name="format-detection" content="telephone=no" />
1 <meta name="format-detection" content="email=no" />
5、当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari
1 <meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后,safari上已看不到效果 -->
6、将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式
1 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->
.css{-webkit-user-select:none}
2、禁止ios长按时触发系统的菜单,禁止ios&android长按时下载图片
.css{-webkit-touch-callout: none}
.css{-webkit-appearance:none;}
4、修改webkit表单输入框placeholder的样式
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
5、去除android a/button/input
标签被点击时产生的边框 & 去除ios a
标签被点击时产生的半透明灰色背景
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;}
input::-webkit-input-speech-button {display: none}
/* 移动端定义字体的代码 */body{font-family:Helvetica;}
<input type=file accept="image/*">
<input type=file accept="video/*">
2、取消input在ios下,输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
<a href="tel:0755-10086">打电话给:0755-10086</a>
<a href="sms:10086">发短信给: 10086</a>
2、box-orient 定义盒模型内伸缩项目的布局方向
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
3、box-direction 定义盒模型内伸缩项目的正序(normal默认值)、倒叙(reverse)
-moz-box-direction:reverse;
/* Safari、Opera 以及 Chrome */
-webkit-box-direction:reverse;
-webkit-box-pack: center;
5、box-pack 对盒子垂直方向富裕空间的管理
/*
start
end
center
*//* box-align */-webkit-box-align: center;-moz-box-align: center;-ms-flex-align: center;-o-box-align: center;box-align: center;
/*-moz-box-ordinal-group:1;*/ /* Firefox */
/*-webkit-box-ordinal-group:1;*/ /* Safari 和 Chrome */
.box div:nth-of-type(1){-webkit-box-ordinal-group:1;}
.box div:nth-of-type(2){-webkit-box-ordinal-group:2;}
.box div:nth-of-type(3){-webkit-box-ordinal-group:3;}
.box div:nth-of-type(4){-webkit-box-ordinal-group:4;}
.box div:nth-of-type(5){-webkit-box-ordinal-group:5;}
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari 和 Chrome */
.box div:nth-of-type(1){-webkit-box-flex:1;}
.box div:nth-of-type(2){-webkit-box-flex:2;}
.box div:nth-of-type(3){-webkit-box-flex:3;}
.box div:nth-of-type(4){-webkit-box-flex:4;}
.box div:nth-of-type(5){-webkit-box-flex:5;}
转载请注明:前端录»移动端页面开发资源总结