解决手机自带浏览器上,用rem单位,内容超出屏幕宽度问题!(rem计算不准)
2017-08-09 17:28
393 查看
问题描述:
在H5手机页面上,用rem单位布局,配合js计算出一个根节点的font-size(原理是屏幕宽度乘以一个固定比例,如1/100),之后页面中所有的px全都换算成了rem单位来写,优点是能适配各种不同屏幕尺寸的手机,不需要写媒体查询!例如:设计稿是750px,用js计算出来的根节点font-size是100px(证明此时屏幕宽度是750px),那最外层的容器宽度就写成7.5rem(计算成像素也是750),正常情况下是内容宽度就会和屏幕宽度一样。然而某款华为手机、自带的浏览器下,最外层的容器宽度就会比屏幕宽度要宽,横向竟然可以滚动!!!经过各种调试,找出了问题的根本,华为自带浏览器上rem单位计算不准! 计算后的值比正确值大了。
解决方案:
一、项目还没开始做用到rem布局就会出现这种问题,所以开始布局的时候宽度不要用rem布局,首先考虑百分比布局,然后考虑弹性盒布局,避免这种情况出现
二、项目进入测试
这样的话,考虑上一步解决可行度,不行的话考虑以下:
1、计算出最外层容器(或者某个宽度自己试试)是否大于屏幕宽度。2、如果大于、计算误差的比例。3、直接重置根节点的font-size!
相关文章推荐
- canvas 单位问题 类似rem和rpx自适应手机屏幕宽度
- 解决Android手机自带内部存储路径存在但是却获取不到内容的问题
- 手机页面内容超出屏幕宽度时实现可拖拉滑动效果
- 【问题】手机页面左右晃动,页面宽度超出手机屏幕宽度
- 手机移动端浏览器或PC端浏览器莫名出现计算错误或莫名返回到登录界面等问题的解决.
- 网页内容设置有用的meta设置解决网页内容不能适应某些浏览器宽度的问题
- 自带浏览器提示无法下载,手机不支持此内容的解决方法
- Android WebView或手机浏览器打开连接问题解决办法总结
- 苹果手机点击输入框input 页面放大 超出屏幕问题
- 解决jQuery动态获取手机屏幕高和宽的问题
- 解决RTMP推送时间戳问题引起HLS切片不均匀导致手机浏览器播放卡顿的问题
- 急求解决:如何将TodayScreen插件的宽度设为屏幕宽,就像系统自带的"日期"插件一样,不出现滚动条。
- iOS重新定义系统自带的方法,如 重定义 CGRectMake 和 CGPointMake 可以解决屏幕适配的问题
- 导航面板[ExtJS4]ExtJS4左边菜单面板收缩展开,右边TabPanel内容动态更新(解决宽度不能自适应问题)
- css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
- html网页兼容手机浏览器(解决显示页面很小的问题)
- html固定宽度下拉框内容显示不全问题解决方法
- angular解决手机浏览器不兼容问题
- 在AppWeb后台,管理员所有数据已经录入完毕,但用手机浏览器登录评委打分界面,发现打分界面为空,或者选手人数不对等问题,如何解决?
- 使用UIAutomator在Android6.0执行,无法向手机SD卡写入内容问题的解决