移动端 web

移动web问题整理

Posted by 曲小强 on September 2, 2016

meta 基础知识

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- 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模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!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

中文字体使用系统默认即可，英文用Helvetica

1

body{font-family:Helvetica;}

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

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

1

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

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

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

1
2
3
4

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

-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符

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

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

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

1

.css{-webkit-appearance:none;}

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

1
2
3
4
5
6
7
8
9

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的颜色值能改变么

1
2

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

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

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

1
2
3

select::-ms-expand {
display: none;
}

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

1
2
3

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

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

1
2
3

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

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

1

.css{-webkit-touch-callout: none}

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

1
2
3
4

img{
    pointer-events:none;
    -webkit-pointer-events:none;
}

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

1
2
3

document.oncontextmenu = function(e){
      e.preventDefault();
}

禁止ios和android用户选中文字

1
2

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

其它问题

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

1
2
3

<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中无法自动播放

1
2
3

$('html').one('touchstart',function(){
    audio.play()
})

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

原因: android侧是复写了layoutinflater 对textview做了统一处理 ios侧是修改了body.style.webkitTextSizeAdjust值

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/**
 * 页面加入这段代码可使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禁止调整字体大小

1

body{-webkit-text-size-adjust: 100%!important;}

最好的解决方案：rem布局

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

1

<input autocapitalize="off" autocorrect="off" />

android 上去掉语音输入按钮

1

input::-webkit-input-speech-button {display: none}

播放视频不全屏

1
2
3
4
5
6
7
8
9
10
11

<!--
1.目前只有ios7+、winphone8+支持自动播放
2.支持Airplay的设备（如：音箱、Apple TV)播放
x-webkit-airplay="true" 
3.播放视频不全屏，ios7、、winphone8+支持，部分android4+支持（含华为、小米、魅族）
webkit-playsinline="true" 
4.ios 10 : playsinline
5.ios 8、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>

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

1
2
3
4

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

常用的移动端框架

zepto.js

iscroll.js

slip.js

iSlider.js

fullpage.js

swiper.js

目录
    热门 hot
    Js CSS HTML 面试题 移动端 Flex Http
    大佬Blog
    回到顶部 返回
    顶部