Web 前端移动端问题小结

CSS

meta 标签

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页
放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面 做了缩小优化，所以字体等都相应缩小了
（980px是相对于手机像素的，我的是超过1000px多一些就出现滚动条了，这个没具体研究）。

关于  initial-scale=1 ，这个参照iphone5的尺寸320*568，如果你页面按照640*1136做的话，scale就设为0.5                     
<meta content="yes" name="apple-mobile-web-app-capable">   IOS中safari允许全屏浏览

<meta content="black" name="apple-mobile-web-app-status-bar-style">  IOS中Safari顶端状态条样式

<meta content="telephone=no" name="format-detection">  忽略将数字变为电话号码

<meta content="email=no" name="format-detection">   忽略识别email

placeholder元素样式的修改

input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}

使用 a 标签的话，尽量让 a 标签 block ，尽量让用户可点击区域最大化

禁止用户选中文字 -webkit-user-select:none

当弹窗出现时，想禁止屏幕的滑动，给那个遮罩层添加touchmove事件即可，用e.preventDefault()会阻止的scroll，click等事件，消失时再off掉，

$(".body_cover").on("touchmove", function(e) {
    e.preventDefault();
});

微信

判断来自微信

function isFromWeiXin() {
       var ua = navigator.userAgent.toLowerCase();
       if (ua.match(/MicroMessenger/i) == "micromessenger") {
           return true;
       }
       return false;
   }

判断手机端

var user="";
if (/android/i.test(navigator.userAgent)){
　　      //  android
      user="1";
  }
  if (/ipad|iphone|mac/i.test(navigator.userAgent)){
      //  ios
      user="0";
  }

如果在网页里嵌套一个iframe，src为其他的网址等，当在微信浏览器打开时，如果iframe里的页面过大，则iframe的src不能加载（具体多大不知道，只是遇到过）

Web 前端 移动端问题小结

猜你喜欢

Web 前端移动端问题小结