移动端web开发小结

2019-04-14271次阅读

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;
}());
上一篇: javascript判断一个变量是否是数组类型  下一篇: 前端必备!最全nginx技术分析(转载收藏)  

移动端web开发小结相关文章