H5 前端常见问题_h5 ontouchstart-优快云博客

前言

关闭电话号码的自动识别:

关闭邮箱的自动识别:

开启电话功能:

开启短信功能:

开启长按邮箱地址弹出邮件发送的功能:

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

IOS中Safari允许全屏浏览:

指定当前浏览器去模拟某个特定版本浏览器的渲染方式：

设置视口宽度, 缩放比例:

移动端viewport模板:

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

常见问题

1、移动端长度单位用rem还是vw

都可以，不过rem需要适配，就是将html根元素的字体大小，设置为整个屏幕的宽，这样1rem就等于整个屏幕的宽了。其实用vw布局更加简洁方便，100vw就是整个屏幕的宽，vw是css官方的尺寸单位，无需配置。然而vw的兼容性比rem稍差，ios8、安卓4.4及以上的才完全支持，这也是之前rem布局一直更流行的原因。不过目前ios8、安卓4.4以下的用户已经几乎没有了，从iphone4s就用ios8了，而安卓4.4是2013年底出来的，现在早就淘汰了。

2、什么是Retina 显示屏，带来了什么问题

retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样大小的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个, 在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为2倍。

应对方案：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的一半。

// 例如图片宽高为：200px*200px，那么写法如下

.css{width: 100px; height: 100px; background-size: 100px 100px;}

其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px

.css{font-size: 20px;}

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

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

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

a,button,input,textarea{

-webkit-tap-highlight-color: rgba(0,0,0,0);

}

有些机型去除不了, 还有个办法，不使用a或者button标签，用div模拟。

5. 禁止文本缩放

当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以这么禁止：

html {

-webkit-text-size-adjust: 100%;

}

6. 快速回弹滚动

在iOS上如果你想让一个元素拥有像Native的滚动效果，你可以这样做：

.xxx {

overflow: auto; /* auto | scroll */

-webkit-overflow-scrolling: touch;

}

7. 移动端禁止选中内容

.user-select-none {

-webkit-user-select: none; /* Chrome all / Safari all */

-moz-user-select: none; /* Firefox all （移动端不需要） */

-ms-user-select: none; /* IE 10+ */

}

8. 移动端取消touch高亮效果

在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止：

html {

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

但这个方法在三星的机子上无效，有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。

9. 如何禁止保存或拷贝图像(IOS)

img { -webkit-touch-callout: none; }

10. 模拟按钮hover效果

移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，无法使用css的hover, 怎么办? 设置了伪类 :active，代码如下:

<style type="text/css">
    html {-webkit-tap-highlight-color: rgba(0,0,0,0);}
    .btn-blue{
        display:block;
        height:42px;
        line-height:42px;
        text-align:center;
        border-radius:4px;
        font-size:18px;
        color:#FFFFFF;
        background-color: #4185F3;
    }
    .btn-blue:active{background-color: #357AE8;}
</style>

<div class="btn-blue">按钮</div>

11.屏幕旋转的事件和样式

事件

window.onorientationchange ，取值：正负90表示横屏模式、0和180表现为竖屏模式；

window.onorientationchange = function () {
    switch (window.orientation) {
        case -90:
        case 90:
            alert("横屏:" + window.orientation);
            break;
        case 0:
        case 180:
            alert("竖屏:" + window.orientation);
            break;
    }
}

样式

// 竖屏时使用的样式
@media all and (orientation: portrait) {
    .css{}
}

// 横屏时使用的样式
@media all and (orientation: landscape) {
    .css{}
}

12.audio元素和video元素在ios和andriod中无法自动播放

应对方案：触屏即播

$('html').on('touchstart', function () {

audio.play();

})

13.摇一摇功能

HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

14.规定上传的文件类型

通过accept属性控制

<input type=file accept="image/*"> 任何类型的图片

<input type="file" accept="image/gif, image/jpg" /> 只能gif或jpg的图片

<input type=file accept="video/*"> 任何类型的视频

<input type=file accept="audio/*"> 任何类型的音频

15、长时间按住页面出现闪退

body {

-webkit-touch-callout: none;

}

16、1px边框

在移动端中，如果给元素设置一个像素的边框，那么在手机上看起来是会比一个像素粗的，是因为移动端的设备像素比例(window.devicePixelRatio)不为1。

解决方法：

1.
window.onload = function () {
    var dpr = window.devicePixelRatio;
    var scale = 1 / dpr;
    // 获取meta[name="viewport"]标签, 设置缩放比例。
    var meta = document.querySelector('meta[name="viewport"]');
    meta.setAttribute('content', 'width=device-width,initial-scale=' + scale + ',user-scalable=no');
    /*
    元素宽高用rem, 1rem相当于屏幕的宽；边框的宽高还用px；
    元素宽高也可用vw，用vw可以省了下面的代码，100vw等于屏幕的宽。
    */
    var html = document.documentElement;
    html.style.fontSize = document.documentElement.clientWidth + 'px';
}

2.
.box {
    width: 200px;
    height: 200px;
    position: relative;
}
.box:before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #000;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .box:before {
        transform: scaleY(0.5);
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .box:before {
        transform: scaleY(0.33333333);
    }
}

17、pc端字体正常显示, 但ios真机就出现h1、span等标签字体比较大:

html {

-webkit-text-size-adjust: 100%;

}

18. 响应式图片

div包裹着一张图片，如果div宽度大于图片的宽度，图片被拉伸失真, 解决方法：

img {

max-width: 图片宽度;

}

19. 点透bug的产生

例如：

<div id="haorooms">点透事件测试</div>

div是绝对定位的蒙层，并且z-index高于a。而a标签是页面中的一个链接，我们给div绑定tap事件：

$('#haorooms').on('tap',function(){

$('#haorooms').hide();

});

点击蒙层时div正常消失，但是在a标签上点击蒙层时，蒙层消失后a链接也会触发，这就是所谓的点透事件。

原因：

touchstart早于touchend早于click, 因为click的触发有300ms的延迟, 当tap触发之后蒙层隐藏, 此时click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接。

解决：

1.尽量都使用touch事件来替换click事件。例如用touchend事件（推荐）

2.用fastclick

3.用preventDefault阻止a标签的click

20.移动端你们一般采用什么布局？移动端设计稿是多大的尺寸？

移动端布局方式: rem布局, vw布局, 弹性布局, 定宽布局。

移动端设计稿尺寸: 一般移动端设计稿是640或者750的尺寸

21. em和rem的区别

em参照自身元素的font-size大小来设置大小, 如果自身没有设置font-size，则向上查找其父级，直至有设置font-size的元素。

rem直接参照html标签字体大小，并且所有使用rem单位的都是参照html标签。

22. 移动端开发常见的兼容性问题

用同等比例的图片在PC机上很清楚，但是手机上很模糊：

是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以手机端的devicePixelRatio一般都为2。devicePixelRatio就是设备的物理像素分辨率与CSS像素分辨率的比率。

想让图片在手机里显示更为清晰，必须使用两倍的背景图。例如一个div的宽高是100x100，背景图大小必须得200x200，然后background-size:contain;，这样显示出来的图片就比较清晰了。

移动端click屏幕产生200-300 ms的延迟响应：

因为浏览器在手机端使用了双击缩放方案, 造成了300ms的延迟问题。

解决方案：

fastclick可以解决在手机上点击事件的300ms延迟, 或者通过绑定ontouchstart事件，加快对事件的响应。

触摸事件的响应顺序: ontouchstart ontouchmove ontouchend onclick

对非可点击元素（label，span）监听click事件，iso下不会触发：

css增加 cursor：pointer; 就搞定了。

固定定位布局, 键盘挡住输入框内容怎么办：

1）绑定窗口改变事件, 然后通过改变固定定位元素的位置来控制。默认键盘的宽度应该是页面的2分之一, 所以我们位移的距离为页面的二分之一就可以。

window.onresize = function () {
     // $(".mian")就是固定定位的元素
    if (parseInt($(".mian").css('bottom')) != 0) {
        $(".mian").css('bottom', 0);
    } else {
        var winHeight = $(window).height();
        $(".mian").css('bottom', winHeight / 2);
    }
}

2）也可使用可用iScroll插件解决这个问题

消除transition闪屏：

.css{

-webkit-transform-style: preserve-3d;

-webkit-backface-visibility: hidden; /* 设置进行转换的元素的背面是否可见：隐藏 */

}

开启硬件加速, 解决页面闪白, 保证动画流畅:

.css {

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);