1.Meta标签
禁止缩放
页面在手机上显示时,增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户通过点击或者缩放等操作对屏幕放大浏览。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
但ios10以上的版本已经失效了(为了提高Safari中网站的辅助功能,即使网站在视口中设置了user-scalable = no,用户也可以手动缩放。)你可以选择性的使用下面代码
window.onload=function () {
document.addEventListener('touchstart',function (event) {
if(event.touches.length>1){
event.preventDefault();
}
})
var lastTouchEnd=0;
document.addEventListener('touchend',function (event) {
var now=(new Date()).getTime();
if(now-lastTouchEnd<=300){
event.preventDefault();
}
lastTouchEnd=now;
},false)
}
禁止ios上自动识别电话
<meta content="telephone=no" name="format-detection">
禁止android上自动识别邮箱
<meta content="email=no" name="format-detection">
针对ios上的safari上地址栏和顶端样式条
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
2.打电话发短信
<a href="tel:020-11811922">打电话给:0755-10086</a>
<a href="sms:10086">发短信给: 10086</a>
3.IOS上滚动回弹效果
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开,会保持一段时间的滚动 */
PS:网上也有人反应使用-webkit-overflow-scrolling:touch会导致使用固定定位的元素,随着页面一起滚动,只有滚动停止时才会恢复原位。可以试试这个overscroll-behavior: contain阻止滚动链接,滚动不会传播给祖先。
4.ios系统中去掉元素被触摸或点击时产生的半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
5.ios中去掉默认input默认样式
input,button,textarea{-webkit-appearance: none;}
6.移动端轮播图,上下滑动的时候不触发页面的滚动
- body加上css touch-action: none;
- touchstart的时候event.preventDefault();阻止默认事件
7.CSS 如何实现文字两端对齐
text-align-last: justify;
8.美化浏览器自带的 radio ,checkbox 属性
label标签表示点击区域,当点击label时对应就是选中或取消单复选框。伪类选择器 :checked,表示对应控件元素(单选框或是复选框)选中时的样式。加号+相邻兄弟选择器,这个符号表示选择后面的兄弟节点。
<label class="friend-add-btn">
<input type="checkbox" name="form_friend" class="checkWrap" value="1620193637"><em></em>
</label>
.friend-add-btn{
position:absolute;
top: 50%;
right: 0;
margin-top:-22px;
width:44px;
height:44px;
}
.friend-add-btn input{
display:none;
}
.friend-add-btn em{
display:block;
height:100%;
background-color:#fafafa;
border:1px solid #999;
border-radius:5px;
}
.friend-add-btn input:checked+em{
border-color:#0cacff;
background:url(../images/ico.png) no-repeat center;
}
9.改变 input 焦点光标的颜色
input{caret-color: red;}
10.rem 布局
有时候,移动端用rem布局时候,根据不同的屏幕宽度要设置不同的font-size来做到适配,以750px设计稿作为基准,根节点设置 font-size为100px,只考虑最简单的DPR为2情况
;(function(){
var html = document.documentElement,
setFontSize = function(){
var deviceWidth = html.clientWidth;
// if(deviceWidth > 750){
// deviceWidth = 750;
// }
html.style.fontSize = (deviceWidth / 7.5).toFixed(2) + "px";
};
setFontSize();
window.onresize = setFontSize;
}());