问题描述:

   下图红色框区域内容在华为mate10 pro(以下简称mate10)内置浏览器中整体向左偏移,没有居中,其它手机浏览器都无该问题,如下图

  

  

  问题分析

   经过一番追根溯源,我发现是 box-sizing: border-box;属性影响到了,该属性是让元素使用css盒子模型的怪异模式,

   简单来说不会把borderpadding算入元素宽度中;而css盒子模型标准模式: box-sizing: content-box; 

   则会把borderpaading算到元素的宽度中,从而使元素总宽度增加

   若把box-sizing: border-box;直接改为box-sizing: content-box;后华为mate10内置浏览器是没问题了,

   但其它原本没有该问题的手机都会出现上图红色框内容整体向左偏移的问题,这让我陷入了两难

  解决方案

   首先从华为mate10设置中找到内置浏览器UA信息

  

  接着使用正则表达式对它进行识别,若检测到是华为手机,则使用js单独为其添加box-sizing: content-box;属性 ,从而解决该问题

  关键代码

    function cssFixForHuawei() {
var ua = navigator.userAgent,
rechargeBgEle = document.getElementsByClassName("recharge-bg")[0],
rechargeListContentEle = document.getElementsByClassName("recharge-list-content")[0];
if (true === /huawei/ig.test(ua) ) {
rechargeBgEle.style.width = "3.7rem";
rechargeBgEle.style.boxSizing = "content-box";
rechargeListContentEle.style.boxSizing = "content-box";
}
}

  附:我以前写过一篇博文box-sizing:border-box的作用,有兴趣的小伙伴可以看看

华为mate10 pro内置浏览器出现的令人头疼的样式兼容问题的更多相关文章

  1. 这个meta标签会让华为mate10 pro自带浏览器无法粘贴手机收到的验证码信息

     前言 最近在项目中遇到一个问题,注册登录界面点击获取验证码,手机收到短信验证码后可以复制成功,但无法粘贴 让人郁闷的是在其它上手机上的(比如小米,苹果)默认浏览器和其它手机浏览器(比如QQ,夸克,搜 ...

  2. 2017年05月10日记一次微项目投产 | 安卓版微信内置浏览器不能解析gzip压缩过的mp4视频的问题

    前言 今天投产了一个小项目,一个很简单的H5,有播放视频功能,使用了videojs插件. 之前也做过数个视频播放,视频的转压都按照既定流程进行,文件放到FTP后,iphone和安卓机测试下来都没有问题 ...

  3. 探讨Android中的内置浏览器和Chrome

    1.Android默认浏览器和Chrome的区别 Android出厂自带的浏览器:安卓WebKit浏览器,也成内置浏览器或者默认浏览器. 安卓WebKit不是Chrome.Chrome浏览器在它的用户 ...

  4. 微信内置浏览器的JS API

    /**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.新的分享接口,包含朋友圈.好友.微博的分享 ...

  5. 微信内置浏览器WebApp开发,踩坑 · Issue #31 · maxzhang/maxzhang.github.com · GitHub

    最近花6天时间完成了一个七夕的小活动,是一个简单的WebApp.由于我前期对面向微信的Web开发评估不足,导致开发过程十分艰难.写这篇文章总结下,惊醒自己未来不要再犯这样的错误. 问题: 1. 有些比 ...

  6. 安卓版微信内置浏览器,<a href="tel:电话号码"></a> 这个链接失效,不能跳到拨号界面?

    https://segmentfault.com/q/1010000000318831 在URL最后面加“ #mp.weixin.qq.com ”,应该加其他qq.com的二级域名都行,估计是微信的安 ...

  7. 微信内置浏览器的JsAPI(WeixinJSBridge续)[转载]

    原文地址:  http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript ...

  8. 微信内置浏览器的 User Agent的判断

    如何判断微信内置浏览器,首先需要获取微信内置浏览器的User Agent,经过在 iPhone 上微信的浏览器的检测,它的 User Agent 是: Mozilla/5.0 (iPhone; CPU ...

  9. 微信内置浏览器UserAgent的判断

    需求分析 现在微信火了,很多线上的APP都希望通过分享的URL或直接的URL进行产品宣传(写这篇博文的时候,听说微信下个版本将要屏蔽微信中的URL链接),这些链接都将通过微信内置的浏览器打开.PM希望 ...

随机推荐

  1. spanish-1.1

    1.1. ¿Cómo te llamas?Ana : ¿Cómo te llamas?Paco: Buenos dias. Yo soy Paco. Y tú, ¿cómo te llemas?Ana ...

  2. C# LINQ Join两个表连接,关联多个条件的写法

    1.sql语句: select * from Users u join Teachers t on u.UserID==t.TeacherID and u.Name=t.Name 2.linq写法: ...

  3. 解决IDEA中的DashBoard 不显示端口号

    第一步:找到.idea目录下的workspace.xml文件 第二步:找到下图位置 并添加红色部分代码 添加代码如下: <option name="configurationTypes ...

  4. 关于dom4j解析XML的问题分享

    最近在在做个程序需要将C#小工具转成java,因为需要涉及到操作xml文件所以需要引用dom4j: 使用dom4j解析XML时,要快速获取某个节点的数据,使用XPath是个不错的方法,dom4j的快速 ...

  5. 小程序 if else

    与js略有差异 (1).js中的数据 (2) .wxml  中的数据判断 (3)结果显示

  6. 分布式文件服务器FastDFS的使用

    分布式项目中涉及到的文件上传与下载,此时使用之前的上传方式,将上传的文件与当前项目所在服务器放在同一个位置,显然不符合分布式项目的理念,此时我们借助FastDFS将上传的文件数据存储到单纯的一个服务器 ...

  7. ETCD:运行时重新配置

    原文地址:runtime reconfiguration etcd带有增量运行时重新配置的支持.允许我们在集群运行的时候更新集群成员关系. 仅当大多数集群成员都在运行时,才能处理重新配置请求,强烈建议 ...

  8. CentOS7升级OpenSSL版本

    1.CentOS7.6默认安装的openssl版本为 # 查看openssl版本 openssl version 2.下载最新的openssl wget https://www.openssl.org ...

  9. 移动端触发touchend后阻止click事件

    // vue里面简单的处理方式,可以同时兼容PC和移动端 <div @touchend.stop.prevent="doSomething" @click.stop.prev ...

  10. Unix 开发中的 Make 三连

    Unix 开发过程中,经常性的操作是从源码编译安装相应库文件,所以下面三个命令便是家常便饭,俗称三连: ./configure make make install 下面来看看这三步分别做了什么. co ...