H5 前端常见问题

前言

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

        <meta name="format-detection" content="telephone=no" />

关闭邮箱的自动识别:

        <meta name="format-detection" content="email=no" />

开启电话功能:

        <a href="tel:123456">123456</a>

开启短信功能:

        <a href="sms:123456">123456</a>

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

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

IOS中Safari允许全屏浏览:

        <meta name="apple-mobile-web-app-capable" content="yes"/>

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

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

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

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

移动端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>

<a href="www.jb51.net">www.jb51.net</a>

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);

   }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值