移动web问题整理

时间 2019-11-06

标签移动 web 问题整理栏目无线繁體版

原文原文链接

meta 基础知识

<!-- H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<!-- 忽略将页面中的数字识别为电话号码 -->
<meta name="format-detection" content="telephone=no" />
<!-- 忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection" content="email=no" />
<!-- 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->
复制代码

viewport模板

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <title>标题</title>
    <link rel="stylesheet" href="index.css" />
  </head>

  <body>
    这里开始内容
  </body>
</html>
复制代码

CSS常见问题

移动端如何定义字体font-family

中文字体使用系统默认便可，英文用Helveticajavascript

body{font-family:Helvetica;}
复制代码

ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

ios用户点击一个连接，会出现一个半透明灰色遮罩, 若是想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就能够去除半透明灰色遮罩css

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
复制代码

部分android系统中元素被点击时产生的边框怎么去掉

android用户点击一个连接，会出现一个边框或者半透明灰色遮罩, 不一样生产商定义出来额效果不同，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果html

a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only; 
}
复制代码

-webkit-user-modify有个反作用，就是输入法再也不可以输入多个字符java

另外，有些机型去除不了，如小米2android

对于按钮类还有个办法，不使用a或者input标签，直接用div标签ios

webkit表单元素的默认外观怎么重置

.css{-webkit-appearance:none;}
复制代码

伪元素改变number类型input框的默认样式git

input[type=number]::-webkit-textfield-decoration-container {
    background-color: transparent;    
}
input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
}
复制代码

webkit表单输入框placeholder的颜色值能改变么

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
复制代码

IE10 表单元素默认外观如何重置

禁用 select 默认下拉箭头 ::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可获得咱们想要的效果。github

select::-ms-expand {
display: none;
}
复制代码

禁用 radio 和 checkbox 默认样式 ::-ms-check适用于表单复选框或单选按钮默认图标的修改，一样有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可获得咱们想要的效果。web

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
display: none;
}
复制代码

禁用PC端表单输入框默认清除按钮 当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，一样设置使它隐藏 (display:none) 并使用背景图片来修饰可获得咱们想要的效果。api

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
display: none;
}
复制代码

禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}
复制代码

禁止微信浏览器图片长按出现菜单

img{
    pointer-events:none;
    -webkit-pointer-events:none;
}
复制代码

禁止微信浏览器长按“显示在浏览器打开”

document.oncontextmenu = function(e){
      e.preventDefault();
}
复制代码

禁止ios和android用户选中文字

.css{-webkit-user-select:none;user-select: none;}

复制代码

其它问题

打电话发短信写邮件怎么实现

<a href="tel:0755-10086">打电话给:0755-10086</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:xxx@foxmail.com">xxx@foxmail.com</a>
复制代码

audio元素和video元素在ios和andriod中没法自动播放

$('html').one('touchstart',function(){
    audio.play()
})
复制代码

微信浏览器用户调整字体大小后页面矬了，怎么阻止用户调整

缘由: android侧是复写了layoutinflater 对textview作了统一处理 ios侧是修改了body.style.webkitTextSizeAdjust值

解决方案： android使用如下代码，该接口只在微信浏览器下有效(感谢jationhuang同窗提供)

/** * 页面加入这段代码可以使Android机器页面再也不受到用户字体缩放强制改变大小 * 可是会有一个1秒左右的延迟，期间能够考虑经过loading展现 * 仅供参考 */
(function(){
  if (typeof(WeixinJSBridge) == "undefined") {
    document.addEventListener("WeixinJSBridgeReady", function (e) {
      setTimeout(function(){
        WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
          alert(JSON.stringify(res));
        });
      },0);
    });
} else {
    setTimeout(function(){
      WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
        alert(JSON.stringify(res));
      });
    },0);
  }
})();
复制代码

ios使用-webkit-text-size-adjust禁止调整字体大小

body{-webkit-text-size-adjust: 100%!important;}
复制代码

最好的解决方案：rem布局

取消input在ios下，输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />
复制代码

android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}
复制代码

播放视频不全屏

<!-- 1.目前只有ios7+、winphone8+支持自动播放 2.支持Airplay的设备（如：音箱、Apple TV)播放 x-webkit-airplay="true" 3.播放视频不全屏，ios七、、winphone8+支持，部分android4+支持（含华为、小米、魅族） webkit-playsinline="true" 4.ios 10 : playsinline 5.ios 八、9 ：https://github.com/bfred-it/iphone-inline-video -->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
<video playsinline preload="auto" autoplay src="http://"></video>
复制代码

微信浏览器禁止页面上下拉动

//禁止页面上拉下拉
document.body.addEventListener('touchmove', function (e) {
    e.preventDefault(); //阻止默认的处理方式
}, {passive: false}); //passive 参数不能省略，用来兼容ios和android
复制代码

经常使用的移动端框架