华为mate10 pro内置浏览器出现的令人头疼的样式兼容问题
时间:2019-11-14
本文章向大家介绍华为mate10 pro内置浏览器出现的令人头疼的样式兼容问题,主要包括华为mate10 pro内置浏览器出现的令人头疼的样式兼容问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
问题描述:
下图红色框区域内容在华为mate10 pro(以下简称mate10)内置浏览器中整体向左偏移,没有居中,其它手机浏览器都无该问题,如下图
问题分析
经过一番追根溯源,我发现是 box-sizing: border-box;属性影响到了,该属性是让元素使用css盒子模型的怪异模式,
简单来说不会把border和padding算入元素宽度中;而css盒子模型标准模式: box-sizing: content-box;
则会把border和paading算到元素的宽度中,从而使元素总宽度增加
若把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的作用,有兴趣的小伙伴可以看看
原文地址:https://www.cnblogs.com/tu-0718/p/11857240.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- docker安装官方redis集群并集群连接测试 的正确姿势 自用 实践笔记
- Asp.net Core 使用Jenkins + Dockor 实现持续集成、自动化部署(一):Jenkins安装
- Centos7安装轻量级TCP转发工具rinetd注册为服务的正确姿势 并设置开机自启 实践笔记 自用
- Connection open error . Connection Timeout Expired. The timeout period elapsed during the post-login
- macbook-12-2015款 安装win10系统 自用 实践笔记
- OpenGL ES 之attribute
- windows server 2012 r2 搭建文件服务器 问题记录 自用 实践笔记
- OpenGL ES 之uniform和varying
- OpenGL ES 绘制纹理
- Win10+Unlocker3+VMware15.5+MacOS10.14+xcode+QT for ios+虚拟机苹果系统 自用 实践笔记
- OpenGL ES 纹理过滤模式-glTexParameteri
- Jenkins时间修改为北京时间
- OpenGL ES for Android 绘制一个点
- OpenGL ES for Android 绘制线
- Jenkins自定义主题