浏览器字体大小改变(微信浏览器)影响页面布局问题

20171112 发布于2019-08-29 14:15 / 2460人阅读

摘要：对于这种情况我试过两种解决方式禁止浏览器禁止调整浏览器字体大小行为优点这种方式可以完全还原页面原本的布局样式。一禁止调整浏览器字体大小浏览器的放大字体功能在系统和系统中调整浏览器字体的实现方式不同，所以要针对设置。

手机在系统设置和微信设置的通用设置中都提供放大字体功能，这两种设置都可以系统中字体和应用中字体的大小。
此外在微信浏览器和其他一些浏览器中还提供手动设置浏览器字体大小，一旦用户设置放大字体，很多页面的布局就会错位，也是很尴尬了。

正常情况下一个页面代码，输入栏的名称和输入框是百分比布局，左右浮动。在不同大小的设备上都可以正常显示。



    
    
    
    微信浏览器放大字体问题
    
    



    
        姓名: 
        
    
    
        电话: 
        
    
    
        电话: 
        
    
    完成提交

但是在浏览器的设置中设置字体大小后，页面布局就错位了。

对于这种情况我试过两种解决方式：

禁止浏览器禁止调整浏览器字体大小行为

优点：1. 这种方式可以完全还原页面原本的布局样式。2. 实现简单，只需在页面上加一段css,一段JavaScript。
缺点：1. 因为通过代码执行完成可能造成页面闪烁，这个问题可以通过提前执行这段代码或者做加载完成前页面暂时不展示解决。2. 这种方式对那些真正需要放大浏览器字体的用户并不友好。

改变布局适应适应这种调整浏览器字体大小行为

优点：1. 不许额外执行JavaScript代码。2. 用户可以选择调整浏览器字体,对于有这种需求的用户友好，目前像京东淘宝的移动web端都是使用这种方式。
缺点：1. 即使通过改变布局该应对变化，但是还是会出现布局错位的情况。2. 实现起来较为复杂，需要在开发时一直考虑这个问题。

一、禁止调整浏览器字体大小

浏览器的放大字体功能在iOS系统和Android系统中调整浏览器字体的实现方式不同，所以要针对设置。参考富途Web开发团队https://futu.im/posts/2017-10...

iOS系统

在iOS系统中调整浏览器字体的字体大小是通过给body设置-webkit-text-size-adjust属性实现的，所以可以通过用优先级覆盖这个属性来禁止调整字体大小。

body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
}

Android系统

在安卓系统中调整浏览器字体是通过改变字体大小。所以可以考虑将字体大小在设置的时候进行等比例缩小。例如，一个文字希望以10px来进行渲染，当浏览器字体被放大两倍时，此时font-size会变为20px。因此我们可以在取到这个放大比例之后，对原样式进行等比缩小，比如将原文字大小设置为5px，渲染的时候就变成了10px。
做这种处理时注意页面中使用rem为单位。

二、改变布局适应浏览器字体的变化

改变布局适应浏览器字体变化要根据页面实际布局结构来调整。
比较常见的情况比如：元素1和元素2浮动布局或直接是行内元素。在放大浏览器字体的字体后，两个元素的宽度都可能超过原先设置的宽度，导致布局错位。

这种情况可以通过改变布局方式来避免。

设置元素1固定的宽度，依据外部box靠左定位

设置外部box的padding-left为元素1的宽度

设置元素2的的宽度为外部box的100%

云服务器 GPU云服务器 js改变标签字体大小微信浏览器微信浏览器 webrtc 浏览器刷新问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113023.html

浏览器字体大小改变(微信浏览器)影响页面布局问题

摘要：对于这种情况我试过两种解决方式禁止浏览器禁止调整浏览器字体大小行为优点这种方式可以完全还原页面原本的布局样式。一禁止调整浏览器字体大小浏览器的放大字体功能在系统和系统中调整浏览器字体的实现方式不同，所以要针对设置。手机在系统设置和微信设置的通用设置中都提供放大字体功能，这两种设置都可以系统中字体和应用中字体的大小。此外在微信浏览器和其他一些浏览器中还提供手动设置浏览器字体大小，一旦用...

whataa 2019-08-01 18:26 评论0 收藏0
浏览器字体大小改变(微信浏览器)影响页面布局问题

摘要：对于这种情况我试过两种解决方式禁止浏览器禁止调整浏览器字体大小行为优点这种方式可以完全还原页面原本的布局样式。一禁止调整浏览器字体大小浏览器的放大字体功能在系统和系统中调整浏览器字体的实现方式不同，所以要针对设置。手机在系统设置和微信设置的通用设置中都提供放大字体功能，这两种设置都可以系统中字体和应用中字体的大小。此外在微信浏览器和其他一些浏览器中还提供手动设置浏览器字体大小，一旦用...

goji 2019-08-22 13:53 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
真的,移动端尺寸自适应与dpr无关

摘要：做移动端自适应时可能很多人都对自适应和之间的关系产生疑问也有一些人会疑虑比如我的自适应方案没有加会不会出问题针对这些疑问我说一下我的见解。做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解。 1. 什么是尺寸自适应首先标题说的自适应,可能自适应在不同人眼里理解不同，特别与响应式的关...

omgdog 2019-08-22 18:19 评论0 收藏0