精华内容
下载资源
问答
  • H5兼容性测试点.docx

    2018-01-08 14:56:53
    H5兼容相关几点测试点及举例说明!!!!!!!!!!!!!!!
  • H5页面移动端兼容性测试 2018年12月17日 18:30:46阅读数:397 一、背景 测试任务:H5页面,但是涉及移动端常用沟通工具,常用浏览器访问兼容性测试 二、分析 1、常用聊天工具:微信、QQ、钉钉 ...

    H5页面移动端兼容性测试

    一、背景

    测试任务:H5页面,但是涉及移动端常用沟通工具,常用浏览器访问兼容性测试

    二、分析

    1、常用聊天工具:微信、QQ、钉钉

    2、手机端常用浏览器:UC浏览器、QQ浏览器、360浏览器百度浏览器、手机自带浏览器

    3、常用手机型号:华为、魅族、小米、Iphone

    4、分辨率:

     VGA(640×480像素),QVGA(240×320像素),HVGA(480×320像素),WVGA(854×480像素、800×480像素), QCIF(176×144像素、176×220像素、96×96像素、128×128像素)

    综上所分析,感觉重复工作量实在太大

    三、思考

    1、是否可以有软件模拟各种手机机型;(否决,真机和模拟器有差别)

    但是在查找解决方案的时候也发现了一个静态页面兼容性的在线网站

    Sizzy 在线iOS、Android 平台浏览器兼容性测试

    网站名称:Sizzy

    网站地址:https://sizzy.co/

    网站功能:检查网页在手机浏览器上的兼容性

    2、是否可以实现操作一次,同时验证多种手机自带浏览器效果

    通过网上查询资料,查找到一个多终端联动的工作,可实现操作一端,其他终端联动。

    可解决以上问题,参考

    https://blog.csdn.net/l_ynan/article/details/73176388

    3、要对比H5页面和设计图,同时还要操作一个终端,感觉会比较麻烦,是否可以实现pc终端自动化

    通过python+selenium实现了pc终端访问页面,页面自动下滑实现pc自动化

     

    所以、最终实现以下场景

    1、启动页面代理

    browser-sync start --proxy "http://localhost:6060/mobile-xb-school" "css/*.css"

    2、pc端访问该页面

    3、不同手机端浏览器访问该页面

    4、pc端启动自动化脚本(脚本启动chrome浏览器,访问页面,实现页面自动下滑,并且每次下滑后在该页面停留8s)

    5、pc端自动下滑时,各移动端也自动下滑

    所以,验证时只要打开UI设计图,对比各个手机上展示的效果即可

    转载于:https://www.cnblogs.com/toney-66/p/10593046.html

    展开全文
  • H5页面,常用浏览器访问兼容性测试

    千次阅读 2020-05-07 16:44:09
    安装BrowserSync npm install -g browser-sync 参考文档: H5页面移动端兼容性测试 移动端测试方法 如何测试网页加载速度,WebPagetest使用技巧 web移动端常见面试题以及适配兼容问题 ...

    兼容性测试
    兼容测试包括:
      (1)浏览器兼容测试:测试程序在不同浏览器上是否可以正常运行,功能能否正常使用;
      (2)屏幕尺寸和分辨率兼容测试:测试程序在不同分辨率下能否正常显示;
      (3)操作系统兼容测试:测试程序在不同的操作系统下面能否正常运行,功能能否正常使用,显示是否正确等;
      (4)不同设备型号兼容测试:针对于APP,现在移动设备型号五花八门,主要测试APP在主流设备上能否正常运行,会不会出现崩溃的现象。
    测试方法:
    一种是人工测试即全手工测试兼容;另外一种是借助第三方兼容性测试工具;
    如何进行兼容性测试
      Web兼容性测试
      首先开展人工测试,测试工程师测试主流浏览器和常用操作系统测试主流程和主界面,看看主流程和主界面是否有问题,如果存在问题,那么记录下bug情况,以及浏览器型号和版本,以及操作系统,准确定位bug产生的原因,提交bug,告知开发人员修改。所有的主流设备都需要进行测试,只关注主流程和主界面,毕竟每个系统主流程和主界面不是很多,所以这个工作量还是可以承受的。
      其次借助第三方测试工具,目前我觉得比较好用的第三方Web测试工具有IEtester(离线)、SuperPreview(离线)和Browsershots:browsershots.org(在线),一款可以测试IE的兼容,一款可以测试主流浏览器的兼容,包括谷歌、火狐、Opera等等。借助第三方测试工具,找到bug产生的位置,分析测试结果,告知程序员调整。

    全局安装BrowserSync

    npm install -g browser-sync
    

    在这里插入图片描述
    运行命令不起作用
    在这里插入图片描述
    解决方案:在Vue项目中使用浏览器同步测试工具 browersync

    局部安装browser-sync

     npm install -g browser-sync (项目中局部安装  npm install --save-dev browser-sync)
    

    然后在你的package.json中,你会看到新的依赖,然后配置你的

    "scripts": {
        "dev": "browser-sync start --server --files \"*.html, css/*.css, js/*.js\"",
        "start": "npm run dev"
      },
    

    接下来,你在cmd下的项目目录中,输入npm run dev
    在这里插入图片描述
    浏览器
    在这里插入图片描述
    在这里插入图片描述

    好吧,到底哪里出问题了

    localhost/:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    localhost/:7 Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ThhI8UaSFEbbl6cISiZpnJ4Z44uNSq2tPKgyRTD3LyU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
    
    localhost/:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    

    翻译:

    拒绝执行内联脚本,因为它违反了以下内容安全策略指令:“default-src ‘self’”。要启用内联执行,需要一个散列(‘sha256ThhI8UaSFEbbl6cISiZpnJ4Z44uNSq2tPKgyRTD3LyU=’)或一个nonce> (‘nonce-…’)。还要注意,'script-src’没有被显式地设置,因此’default-src’被用作回退。


    参考文档:
    H5页面移动端兼容性测试
    移动端测试方法
    如何测试网页加载速度,WebPagetest使用技巧
    web移动端常见面试题以及适配兼容问题
    vue 项目使用局域网多端访问并实时自动更新(利用 browser-sync)

    展开全文
  • 移动端H5兼容性问题

    2021-02-02 14:53:02
    移动端H5兼容性问题 HTML方向 调用系统功能 使用<a>能快速调用移动设备的电话/短信/邮件三大通讯功能,使用能快速调用移动设备的的图库/文件。这些功能方便了页面与系统的交互,关键在于调用格式一定要准确,...

    移动端H5兼容性问题

    HTML方向

    调用系统功能

    使用<a>能快速调用移动设备的电话/短信/邮件三大通讯功能,使用能快速调用移动设备的的图库/文件。这些功能方便了页面与系统的交互,关键在于调用格式一定要准确,否则会被移动端浏览器忽略。

    <!-- 拨打电话 -->
    <a href="tel:10086">拨打电话给10086小姐姐</a>
    
    <!-- 发送短信 -->
    <a href="sms:10086">发送短信给10086小姐姐</a>
    
    <!-- 发送邮件 -->
    <a href="mailto:young.joway@aliyun.com">发送邮件给JowayYoung</a>
    
    <!-- 选择照片或拍摄照片 -->
    <input type="file" accept="image/*">
    
    <!-- 选择视频或拍摄视频 -->
    <input type="file" accept="video/*">
    
    <!-- 多选文件 -->
    <input type="file" multiple>
    
    忽略自动识别

    有些移动端浏览器会自动将数字字母符号识别为电话/邮箱并将其渲染成上述调用系统功能里的。虽然很方便却有可能违背需求。

    <!-- 忽略自动识别电话 -->
    <meta name="format-detection" content="telephone=no">
    
    <!-- 忽略自动识别邮箱 -->
    <meta name="format-detection" content="email=no">
    
    <!-- 忽略自动识别电话和邮箱 -->
    <meta name="format-detection" content="telephone=no, email=no">
    
    弹出数字键盘

    使用弹起数字键盘会带上#和*,适合输入电话。推荐使用弹起数字键盘,适合输入验证码等纯数字格式。

    <!-- 纯数字带#和* -->
    <input type="tel">
    
    <!-- 纯数字 -->
    <input type="number" pattern="\d*">
    
    唤醒原生应用

    通过location.href与原生应用建立通讯渠道,这种页面与客户端的通讯方式称为URL Scheme,其基本格式为scheme://[path][?query],笔者曾经发表过《H5与App的通讯方式》讲述URL Scheme的使用。

    scheme:应用标识,表示应用在系统里的唯一标识
    path:应用行为,表示应用某个页面或功能
    query:应用参数,表示应用页面或应用功能所需的条件参数

    URL Scheme一般由前端与客户端共同协商。唤醒原生应用的前提是必须在移动设备里安装了该应用,有些移动端浏览器即使安装了该应用也无法唤醒原生应用,因为它认为URL Scheme是一种潜在的危险行为而禁用它,像Safari和微信浏览器。还好微信浏览器可开启白名单让URL Scheme有效。
    若在页面引用第三方原生应用的URL Schema,可通过抓包第三方原生应用获取其URL。

    <!-- 打开微信 -->
    <a href="weixin://">打开微信</a>
    
    <!-- 打开支付宝 -->
    <a href="alipays://">打开支付宝</a>
    
    <!-- 打开支付宝的扫一扫 -->
    <a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a>
    
    <!-- 打开支付宝的蚂蚁森林 -->
    <a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>
    
    
    禁止页面缩放

    在智能手机的普及下,很多网站都具备桌面端和移动端两种浏览版本,因此无需双击缩放查看页面。禁止页面缩放可保障移动端浏览器能无遗漏地展现页面所有布局。

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
    
    禁止页面缓存

    Cache-Control指定请求和响应遵循的缓存机制,不想使用浏览器缓存就禁止呗!

    <meta http-equiv="Cache-Control" content="no-cache">
    
    禁止字母大写

    有时在输入框里输入文本会默认开启首字母大写纠正,就是输入首字母小写会被自动纠正成大写,特么的烦。直接声明autocapitalize=off关闭首字母大写功能和autocorrect=off关闭纠正功能。

    <input autocapitalize="off" autocorrect="off">
    
    针对Safari配置
    贴一些Safari较零散且少用的配置。
    <!-- 设置Safari全屏,在iOS7+无效 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    
    <!-- 改变Safari状态栏样式,可选default/black/black-translucent,需在上述全屏模式下才有效 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <!-- 添加页面启动占位图 -->
    <link rel="apple-touch-startup-image" href="pig.jpg" media="(device-width: 375px)">
    
    <!-- 保存网站到桌面时添加图标 -->
    <link rel="apple-touch-icon" sizes="76x76" href="pig.jpg">
    
    <!-- 保存网站到桌面时添加图标且清除默认光泽 -->
    <link rel="apple-touch-icon-precomposed" href="pig.jpg">
    
    
    针对其他浏览器配置

    贴一些其他浏览器较零散且少用的配置,主要是常用的QQ浏览器、UC浏览器和360浏览器。从网易MTL的测试数据得知,新版的QQ浏览器和UC浏览器已不支持以下声明了。

    <!-- 强制QQ浏览器竖屏 -->
    <meta name="x5-orientation" content="portrait">
    
    <!-- 强制QQ浏览器全屏 -->
    <meta name="x5-fullscreen" content="true">
    
    <!-- 开启QQ浏览器应用模式 -->
    <meta name="x5-page-mode" content="app">
    
    <!-- 强制UC浏览器竖屏 -->
    <meta name="screen-orientation" content="portrait">
    
    <!-- 强制UC浏览器全屏 -->
    <meta name="full-screen" content="yes">
    
    <!-- 开启UC浏览器应用模式 -->
    <meta name="browsermode" content="application">
    
    <!-- 开启360浏览器极速模式 -->
    <meta name="renderer" content="webkit">
    
    
    让:active有效,让:hover无效

    有些元素的:active可能会无效,而元素的:hover在点击后会一直处于点击状态,需点击其他位置才能解除点击状态。给注册一个空的touchstart事件可将两种状态反转。

    <body ontouchstart></body>
    

    CSS方向

    自动适应布局

    针对移动端,笔者通常会结合JS依据屏幕宽度与设计图宽度的比例动态声明的font-size,以rem为长度单位声明所有节点的几何属性,这样就能做到大部分移动设备的页面兼容,兼容出入较大的地方再通过媒体查询做特别处理。
    笔者通常将rem布局比例设置成1rem=100px,即在设计图上100px长度在CSS代码上使用1rem表示。

    function AutoResponse(width = 750) {
        const target = document.documentElement;
        if (target.clientWidth >= 600) {
            target.style.fontSize = "80px";
        } else {
            target.style.fontSize = target.clientWidth / width * 100 + "px";
        }
    }
    AutoResponse();
    window.addEventListener("resize", () => AutoResponse());
    
    

    当然还可依据屏幕宽度与设计图宽度的比例使用calc()动态声明的font-size,这样就能节省上述代码。不对,是完全代替上述代码。

    html {
        font-size: calc(100vw / 7.5);
    }
    

    若以iPad Pro分辨率1024px为移动端和桌面端的断点,还可结合媒体查询做断点处理。1024px以下使用rem布局,否则不使用rem布局。

    @media screen and (max-width: 1024px) {
        html {
            font-size: calc(100vw / 7.5);
        }
    }
    
    自动适应背景

    使用rem布局声明一个元素背景,多数情况会将background-size声明为cover。可能在设计图对应分辨率的移动设备下,背景会完美贴合显示,但换到其他分辨率的移动设备下就会出现左右空出1px到npx的空隙。
    此时将background-size声明为100% 100%,跟随width和height的变化而变化。反正width和height都是量好的实际尺寸。

    .elem {
        width: 1rem;
        height: 1rem;
        background: url("pig.jpg") no-repeat center/100% 100%;
    }
    
    监听屏幕旋转

    你还在使用JS判断横屏竖屏调整样式吗?那就真的Out了。

    /* 横屏 */
    @media all and (orientation: landscape) {
        /* 自定义样式 */
    }
    /* 竖屏 */
    @media all and (orientation: portrait) {
        /* 自定义样式 */
    }
    
    支持弹性滚动

    在苹果系统上非元素的滚动操作可能会存在卡顿,但安卓系统不会出现该情况。通过声明overflow-scrolling:touch调用系统原生滚动事件优化弹性滚动,增加页面滚动的流畅度。

    body {
        -webkit-overflow-scrolling: touch;
    }
    .elem {
        overflow: auto;
    }
    
    禁止滚动传播

    与桌面端浏览器不一样,移动端浏览器有一个奇怪行为。当页面包含多个滚动区域时,滚完一个区域后若还存在滚动动量则会将这些剩余动量传播到下一个滚动区域,造成该区域也滚动起来。这种行为称为滚动传播。
    若不想产生这种奇怪行为可直接禁止。

    .elem {
        overscroll-behavior: contain;
    }
    
    禁止屏幕抖动

    对于一些突然出现滚动条的页面,可能会产生左右抖动的不良影响。在一个滚动容器里,打开弹窗就隐藏滚动条,关闭弹窗就显示滚动条,来回操作会让屏幕抖动起来。提前声明滚动容器的padding-right为滚动条宽度,就能有效消除这个不良影响。
    每个移动端浏览器的滚动条宽度都有可能不一致,甚至不一定占位置,通过以下方式能间接计算出滚动条的宽度。100vw为视窗宽度,100%为滚动容器内容宽度,相减就是滚动条宽度,妥妥的动态计算。

    body {
        padding-right: calc(100vw - 100%);
    }
    
    禁止长按操作

    有时不想用户长按元素呼出菜单进行点链接、打电话、发邮件、保存图片或扫描二维码等操作,声明touch-callout:none禁止用户长按操作。
    有时不想用户复制粘贴盗文案,声明user-select:none禁止用户长按操作和选择复制。

    * {
        /* pointer-events: none; */ /* 微信浏览器还需附加该属性才有效 */
        user-select: none; /* 禁止长按选择文字 */
        -webkit-touch-callout: none;
    }
    

    但声明user-select:none会让和无法输入文本,可对其声明user-select:auto排除在外。

    input,
    textarea {
        user-select: auto;
    }
    
    禁止字体调整

    旋转屏幕可能会改变字体大小,声明text-size-adjust:100%让字体大小保持不变。

    • {
      text-size-adjust: 100%;
      }
      复制代码
      禁止高亮显示
      触摸元素会出现半透明灰色遮罩,不想要!
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    禁止动画闪屏

    在移动设备上添加动画,多数情况会出现闪屏,给动画元素的父元素构造一个3D环境就能让动画稳定运行了。

    .elem {
        perspective: 1000;
        backface-visibility: hidden;
        transform-style: preserve-3d;
    }
    
    美化表单外观

    表单元素样式太丑希望自定义,appearance:none来帮你。

    button,
    input,
    select,
    textarea {
        appearance: none;
        /* 自定义样式 */
    }
    
    美化滚动占位

    滚动条样式太丑希望自定义,::-webkit-scrollbar-*来帮你。记住以下三个关键词就能随机应变了。

     ::-webkit-scrollbar:滚动条整体部分
     ::-webkit-scrollbar-track:滚动条轨道部分
     ::-webkit-scrollbar-thumb:滚动条滑块部分
    
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: transparent;
    }
    ::-webkit-scrollbar-track {
        background-color: transparent;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-image: linear-gradient(135deg, #09f, #3c9);
    }
    
    美化输入占位

    输入框占位文本太丑,::-webkit-input-placeholder来帮你。

    input::-webkit-input-placeholder {
        color: #66f;
    }
    
    对齐输入占位

    有强迫症的同学总会觉得输入框文本位置整体偏上,感觉未居中心里就痒痒的。桌面端浏览器里声明line-height等于height就能解决,但移动端浏览器里还是未能解决,需将line-height声明为normal才行。

    input {
        line-height: normal;
    }
    
    对齐下拉选项

    下拉框选项默认向左对齐,是时候改改向右对齐了。

    select option {
        direction: rtl;
    }
    
    修复点击无效

    在苹果系统上有些情况下非可点击元素监听click事件可能会无效,针对该情况只需对不触发click事件的元素声明cursor:pointer就能解决。

    .elem {
        cursor: pointer;
    }
    
    识别文本换行

    多数情况会使用JS换行文本,那就真的Out了。若接口返回字段包含\n或
    ,千万别替换掉,可声明white-space:pre-line交由浏览器做断行处理。

    * {
        white-space: pre-line;
    }
    
    开启硬件加速

    想动画更流畅吗,开启GPU硬件加速呗!

    .elem {
        transform: translate3d(0, 0, 0);
        /* transform: translateZ(0); */
    }
    
    描绘像素边框

    万年话题,如何描绘一像素边框?

    .elem {
        position: relative;
        width: 200px;
        height: 80px;
        &::after {
            position: absolute;
            left: 0;
            top: 0;
            border: 1px solid #f66;
            width: 200%;
            height: 200%;
            content: "";
            transform: scale(.5);
            transform-origin: left top;
        }
    }
    
    控制溢出文本

    万年话题,如何控制文本做单行溢出和多行溢出?

    .elem {
        width: 400px;
        line-height: 30px;
        font-size: 20px;
        &.sl-ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        &.ml-ellipsis {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    }
    

    JS方向

    禁止点击穿透

    移动端浏览器里点击操作会存在300ms延迟,往往会造成点击延迟甚至点击无效,这个是众所周知的事情。
    2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示在移动端浏览器上而使用了双击缩放。该方案就是上述300ms延迟的主要原因,当用户执行第一次单击后会预留300ms检测用户是否继续执行单击,若是则执行缩放操作,若否则执行点击操作。鉴于该方案的成功,其他移动端浏览器也复制了该方案,现在几乎所有移动端浏览器都配备该功能。而该方案引发的点击延迟被称为点击穿透。
    在前端领域里最早解决点击穿透是jQuery时代的zepto,估计现在大部分同学都未使用过zepto,其实它就是移动端版本的jquery。zepto封装tap事件能有效地解决点击穿透,通过监听document上的touch事件完成tap事件的模拟,并将tap事件冒泡到document上触发。
    在移动端浏览器上不使用click事件而使用touch事件是因为click事件有着明显的延迟,后续又出现fastclick。该解决方案监听用户是否做了双击操作,可正常使用click事件,而点击穿透就交给fastclick自动判断。更多fastclick原理可自行百度,在此不作过多介绍。
    fastclick有现成的NPM包,可直接安装到项目里。引入fastclick可使用click事件代替tap事件,接入方式极其简单。

    import Fastclick from "fastclick";
    
    FastClick.attach(document.body);
    
    禁止滑动穿透

    移动端浏览器里出现弹窗时,若在屏幕上滑动能触发弹窗底下的内容跟着滚动,这个是众所周知的事情。
    首先明确解决滑动穿透需保持哪些交互行为,那就是除了弹窗内容能点击或滚动,其他内容都不能点击或滚动。目前很多解决方案都无法做到这一点,全部解决方案都能禁止的滚动行为却引发其他问题。

    弹窗打开后内部内容无法滚动
    弹窗关闭后页面滚动位置丢失
    Webview能上下滑动露出底色

    当打开弹窗时给声明position:fixed;left:0;width:100%并动态声明top。声明position:fixed会导致滚动条消失,此时会发现虽然无滑动穿透,但页面滚动位置早已丢失。通过scrollingElement获取页面当前滚动条偏移量并将其取负值且赋值给top,那么在视觉上就无任何变化。当关闭弹窗时移除position:fixed;left:0;width:100%和动态top。
    scrollingElement可兼容地获取scrollTop和scrollHeight等属性,在移动端浏览器里屡试不爽。document.scrollingElement.scrollHeight可完美代替曾经的document.documentElement.scrollHeight || document.body.scrollHeight,一眼看上去就是代码减少了。
    该解决方案在视觉上无任何变化,完爆其他解决方案,其实就是一种反向思维和障眼法。该解决方案完美解决固定弹窗和滚动弹窗对全局滚动的影响,当然也可用于局部滚动容器里,因此很值得推广。

    body.static {
        position: fixed;
        left: 0;
        width: 100%;
    }
    
    const body = document.body;
    const openBtn = document.getElementById("open-btn");
    const closeBtn = document.getElementById("close-btn");
    openBtn.addEventListener("click", e => {
        e.stopPropagation();
        const scrollTop = document.scrollingElement.scrollTop;
        body.classList.add("static");
        body.style.top = `-${scrollTop}px`;
    });
    closeBtn.addEventListener("click", e => {
        e.stopPropagation();
        body.classList.remove("static");
        body.style.top = "";
    });
    
    
    支持往返刷新

    点击移动端浏览器的前进按钮或后退按钮,有时不会自动执行旧页面的JS代码,这与往返缓存有关。这种情况在Safari上特别明显,简单概括就是往返页面无法刷新。
    往返缓存指浏览器为了在页面间执行前进后退操作时能拥有更流畅体验的一种策略,以下简称BFCache。该策略具体表现为:当用户前往新页面前将旧页面的DOM状态保存在BFCache里,当用户返回旧页面前将旧页面的DOM状态从BFCache里取出并加载。大部分移动端浏览器都会部署BFCache,可大大节省接口请求的时间和带宽。
    了解什么是BFCache再对症下药,解决方案就在window.onunload上做文章。

    // 在新页面监听页面销毁事件
    window.addEventListener("onunload", () => {
        // 执行旧页面代码
    });
    

    若在Vue SPA上使用keep-alive也不能让页面刷新,可将接口请求放到beforeRouteEnter()里。
    当然还有另一种解决方案。pageshow事件在每次页面加载时都会触发,无论是首次加载还是再次加载都会触发,这就是它与load事件的区别。pageshow事件暴露的persisted可判断页面是否从BFCache里取出。

    window.addEventListener("pageshow", e => e.persisted && location.reload());
    
    

    若浏览器不使用<meta http-equiv="Cache-Control" content="no-cache">禁用缓存,该解决方案还是很值得一用。

    解析有效日期

    在苹果系统上解析YYYY-MM-DD HH:mm:ss这种日期格式会报错Invalid Date,但在安卓系统上解析这种日期格式完全无问题。

    new Date("2019-03-31 21:30:00"); // Invalid Date
    

    查看Safari相关开发手册发现可用YYYY/MM/DD HH:mm:ss这种日期格式,简单概括就是年月日必须使用/衔接而不能使用-衔接。当然安卓系统也支持该格式,然而接口返回字段的日期格式通常是YYYY-MM-DD HH:mm:ss,那么需替换其中的-为/。

    const date = "2019-03-31 21:30:00";
    new Date(date.replace(/\-/g, "/"));
    
    修复高度坍塌

    当页面同时出现以下三个条件时,键盘占位会把页面高度压缩一部分。当输入完成键盘占位消失后,页面高度有可能回不到原来高度,产生坍塌导致Webview底色露脸,简单概括就是输入框失焦后页面未回弹。

    • 页面高度过小
    • 输入框在页面底部或视窗中下方
    • 输入框聚焦输入文本

    只要保持前后滚动条偏移量一致就不会出现上述问题。在输入框聚焦时获取页面当前滚动条偏移量,在输入框失焦时赋值页面之前获取的滚动条偏移量,这样就能间接还原页面滚动条偏移量解决页面高度坍塌。

    const input = document.getElementById("input");
    let scrollTop = 0;
    input.addEventListener("focus", () => {
        scrollTop = document.scrollingElement.scrollTop;
    });
    input.addEventListener("blur", () => {
        document.scrollingElement.scrollTo(0, this.scrollTop);
    });
    
    修复输入监听

    在苹果系统上的输入框输入文本,keyup/keydown/keypress事件可能会无效。当输入框监听keyup事件时,逐个输入英文和数字会有效,但逐个输入中文不会有效,需按回车键才会有效。
    此时可用input事件代替输入框的keyup/keydown/keypress事件。
    简化回到顶部
    曾几何时编写一个返回顶部函数麻烦得要死,需scrollTop、定时器和条件判断三者配合才能完成。其实DOM对象里隐藏了一个很好用的函数可完成上述功能,一行核心代码就能搞定。
    该函数就是scrollIntoView,它会滚动目标元素的父容器使之对用户可见,简单概括就是相对视窗让容器滚动到目标元素位置。它有三个可选参数能让scrollIntoView滚动起来更优雅。

    • behavior:动画过渡效果,默认auto无,可选smooth平滑
    • inline:水平方向对齐方式,默认nearest就近对齐,可选start顶部对齐、center中间对齐和end底部对齐
    • block:垂直方向对齐方式,默认start顶部对齐,可选center中间对齐、end底部对齐和nearest就近对齐
    const gotopBtn = document.getElementById("gotop-btn");
    openBtn.addEventListener("click", () => document.body.scrollIntoView({ behavior: "smooth" }));
    

    当然还可滚动到目标元素位置,只需将document.body修改成目标元素的DOM对象。一行核心代码就能搞掂的事情为何还编写那么多代码去完成,不累吗?
    简化懒性加载
    与上述简化回到顶部一样,编写一个懒性加载函数也同样需scrollTop、定时器和条件判断三者配合才能完成。其实DOM对象里隐藏了一个很好用的函数可完成上述功能,该函数无需监听容器的scroll事件,通过浏览器自身机制完成滚动监听。
    该函数就是IntersectionObserver,它提供一种异步观察目标元素及其祖先元素或顶级文档视窗交叉状态的方法。详情可参照MDN文档,在此不作过多介绍。
    懒性加载的第一种使用场景:图片懒加载。只需确认图片进入可视区域就赋值加载图片,赋值完成还需对图片停止监听。

    <img data-src="pig.jpg">
    <!-- 很多<img> -->
    复制代码
    const imgs = document.querySelectorAll("img.lazyload");
    const observer = new IntersectionObserver(nodes => {
        nodes.forEach(v => {
            if (v.isIntersecting) { // 判断是否进入可视区域
                v.target.src = v.target.dataset.src; // 赋值加载图片
                observer.unobserve(v.target); // 停止监听已加载的图片
            }
        });
    });
    imgs.forEach(v => observer.observe(v));
    

    懒性加载的第二种使用场景:下拉加载。在列表最底部部署一个占位元素且该元素无任何高度或实体外观,只需确认占位元素进入可视区域就请求接口加载数据。

    <ul>
        <li></li>
        <!-- 很多<li> -->
    </ul>
    <!-- 也可将#bottom以<li>的形式插入到<ul>内部的最后位置 -->
    <div id="bottom"></div>
    复制代码
    const bottom = document.getElementById("bottom");
    const observer = new IntersectionObserver(nodes => {
        const tgt = nodes[0]; // 反正只有一个
        if (tgt.isIntersecting) {
            console.log("已到底部,请求接口");
            // 执行接口请求代码
        }
    })
    bottom.observe(bottom);
     
    
    优化扫码识别

    通常移动端浏览器都会配备长按二维码图片识别链接的功能,但长按二维码可能无法识别或错误识别。二维码表面看上去是一张图片,可二维码生成方式却五花八门,二维码生成方式有以下三种。

    • 使用<img>渲染
    • 使用<svg>渲染
    • 使用<canvas>渲染

    从网易MTL的测试数据得知,大部分移动端浏览器只能识别渲染的二维码,为了让全部移动端浏览器都能识别二维码,那只能使用渲染二维码了。若使用SVG和Canvas的方式生成二维码,那就想方设法把二维码数据转换成Base64再赋值到的src上。
    一个页面可能存在多个二维码,若长按二维码只能识别最后一个,那只能控制每个页面只存在一个二维码。

    自动播放媒体

    常见媒体元素包括音频和视频,为了让用户得到更好的媒体播放体验与不盲目浪费用户流量,大部分移动端浏览器都明确规定不能自动播放媒体或默认屏蔽autoplay。为了能让媒体在页面加载完成后自动播放,只能显式声明播放。

    const audio = document.getElementById("audio");
    const video = document.getElementById("video");
    audio.play();
    video.play();
     
    

    对于像微信浏览器这样的内置浏览器,还需监听其应用SDK加载完成才能触发上述代码,以保障WebView正常渲染。其他内置浏览器同理,在此不作过多介绍。

    document.addEventListener("WeixinJSBridgeReady", () => {
        // 执行上述媒体自动播放代码
    });
     
    

    在苹果系统上明确规定用户交互操作开始后才能播放媒体,未得到用户响应会被Safari自动拦截,因此需监听用户首次触摸操作并触发媒体自动播放,而该监听仅此一次。

    document.body.addEventListener("touchstart", () => {
        // 执行上述媒体自动播放代码
    }, { once: true });
    

    此文章为转载收藏

    作者:JowayYoung
    链接:https://juejin.cn/post/6921886428158754829
    来源:掘金

    展开全文
  • h5 浏览器兼容性问题: ... 绿色代表完全支持,黄色代表部分支持...兼容性测试: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> ...

    h5 浏览器兼容性问题:

    浏览器兼容性情况可以在这个网站查询 https://caniuse.com/

     

     

     

    绿色代表完全支持,黄色代表部分支持,红色代表不支持

    右上角的黄色小短杠表示要加一些厂商前缀

     

     

     

    兼容性测试:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <style>
            header,footer{
                width:100%;
                height:50px;
            }
            header{
                background:pink;
            }
            footer{
                background:lightgreen;
            }
        </style>
    </head>
    <body>
        <header>header</header>
        <footer>footer</footer>
    </body>
    </html>

    IE9-11

     

     

     

    IE8-

     

     

     解决方法:引入html5shiv  https://www.bootcdn.cn/html5shiv/

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <style>
            header,footer{
                width:100%;
                height:50px;
            }
            header{
                background:pink;
            }
            footer{
                background:lightgreen;
            }
        </style>
        <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
    </head>
    <body>
        <header>header</header>
        <footer>footer</footer>
    </body>
    </html>

     

     

     

    JS浏览器兼容性:

    错误写法:

    <script>
            if(requestAnimationFrame){
                //...
            }
        </script>

    因为如果属性不存在,则表示调用了未声明的变量,会导致报错

    正确写法:

    <script>
            if(window.requestAnimationFrame){
                //...
            }
        </script>

    如果不存在,则调用的是未定义的属性,并不会报错

    但是这种判断并不周全,因为有些浏览器是支持的,但是可能需要厂商前缀

     

    比较严谨的写法:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <style>
            header,footer{
                width:100%;
                height:50px;
            }
            header{
                background:pink;
            }
            footer{
                background:lightgreen;
            }
        </style>
        <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
    </head>
    <body>
        <header>header</header>
        <footer>footer</footer>
    
        <script>
            var requestAnimationFrame=window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.moxRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            //requestAnimationFrame跟setTimeout很类似,浏览器不支持时可以自己写一个类似效果的函数
            function(fn){
                setTimeout(fn,16);
            };
    
            requestAnimationFrame(function(){
                console.log("animation...");
            })
        </script>
    </body>
    </html>

     

     

     

    css3浏览器兼容性:

    通过编辑器插件,自动补全厂商前缀

    或者使用工程化手段自动添加

     

    在vscode中安装插件 :

    1、扩展输入Autoprefixer,点击安装,然后点击重新加载

    2、打开设置->搜索autoprefixer->点击在setting.json里编辑

    3、加入这段代码:

    "autoprefixer.browsers": [
        "last 0 versions",
        "> 5%"
    ]

    4、在需要添加前缀的css文件上,右键点击命令面板,输入Autoprefixer CSS就好啦

     

    如何兼容IE:

    进入 https://modernizr.com/

    点击download

     

     

     搜索你需要检测的特性,点击+号(检测所有特性太庞大,没有必要)

    然后点击build-download

     

     

     在文件中引入刚才下载的js文件

     

     

     你会发现在支持flex属性的浏览器上,html添加了flexbox的类名:

     

     

     而在不支持的浏览器上,html添加了no-flexbox的类名:

     

     

     

    这样就可以分开写兼容状态和不兼容状态的样式:

    别忘了在vscode中按住ctrl+shift+p,输入autoprefixer:run,添加厂商前缀

    header,footer{
        width:100%;
        height:50px;
    }
    header{
        background:pink;
    }
    /* 兼容flex */
    .flexbox header{
        display: -webkit-box;
        display: flex; 
        -webkit-box-pack: center; 
                justify-content: center;
        -webkit-box-align:center;
                align-items:center;
    }
    /* 不兼容flex */
    .no-flexbox header{
        text-align:center;
        line-height: 50px;
    }
    footer{
        background:lightgreen;
    }

     

    展开全文
  • 首先,我们来分析一下系统、分辨率、品牌对兼容性测试的影响:系统因为安卓系统各个版本操作系统的底层实现会发生改变,因此容易出现如果使用了这些底层细微差异的api,出现不一致的情况。比如,各个不同操作系统的...
  • 移动端兼容性测试

    万次阅读 2018-09-30 10:55:33
    什么是兼容性测试 兼容性测试是指测试软件在特定的硬件平台上、不同的应用软件之间、不同的操作系统平台上、不同的网络等环境中是否能够很友好的运行的测试。–【百度百科】 为什么要做兼容性测试 目前碎片化十分...
  • H5兼容性问题解决方法

    千次阅读 2018-06-28 21:02:59
    某些低端手机不支持css3 mask,可以选择的降级处理。 比如可以使用js判断来引用不同class: if( 'WebkitMask' in document.documentElement.style){ alert('支持mask'); } else { alert('不支持mask'); } 18、旋转...
  • 解决IE低版本对H5兼容性问题

    千次阅读 2019-06-09 09:47:01
    兼容处理(解决IE低版本对H5兼容问题) 在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些...
  • 所以 Web 的通用测试点和方法基本都可以适用于它。H5其实就是:移动端Web页面。 在PC或者手机浏览器都可以直接访问H5页面 1.2 怎么识别是H5? 基本上只要对那个view长按,然后看是不是有反应...
  • 兼容性测试是指测试软件在特定的硬件平台上、不同的应用软件之间、不同的操作系统平台上、不同的网络等环境中是否能够很友好的运行的测试。 2 兼容性测试的目的 由于Android设备在品牌、系统、屏幕、硬件等碎片化...
  • APP 内嵌H5, H5遇到的 兼容性问题

    千次阅读 2019-11-21 11:11:09
    因为需求需要 APP内嵌H5页面 , 所以在开发测试过程中,发现了一下兼容性问题, 都已解决,不好的地方还请指出. 希望对大家有所帮助! 1.ios 中日期格式 new Date('2019-10-11') 无效; 解决: new Date('2019-10-11'....
  • App兼容性测试/MONKEY配置和安装

    千次阅读 2020-04-19 09:50:44
    按测试类型分类APP测试的兼容性测试Web测试和App测试有什么区别性能和稳定性工具---MONKEY环境配置和安装云测试平台 APP测试的兼容性测试 上线后进行兼容性测试的话,这种情况只适用于安卓 因为这个情况是不允许的...
  • void doSomethingAndRelease() throwsMyException{ try{ wakeLock.acquire(); doSomethingThatThrows(); }finally{ wakeLock.release(); } }

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,158
精华内容 4,463
关键字:

h5兼容性测试