移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题

一、用户修改手机字体设置大小,影响App里打开的web页面。

手机字体设置大小,影响App的页面。
Android的可以通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放,按照百分百显示。

二、用户调整浏览器字体大小,影响的是从浏览器打开的web页

浏览器设置字体大小,影响浏览器打开的页面。通过js可控制用户修改字体大小,使页面不受影响。

(function(doc, win) {
//      用原生方法获取用户设置的浏览器的字体大小(兼容ie)
        if(doc.documentElement.currentStyle) {
            var user_webset_font=doc.documentElement.currentStyle[‘fontSize‘];
        }
        else {
            var user_webset_font=getComputedStyle(doc.documentElement,false)[‘fontSize‘];
        }
//      取整后与默认16px的比例系数
        var xs=parseFloat(user_webset_font)/16;
//      设置rem的js设置的字体大小
        var view_jsset_font,result_font;
        var docEl = doc.documentElement,
        resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
        clientWidth,
        recalc = function() {
            clientWidth = docEl.clientWidth;
            if(!clientWidth) return;
            if(!doc.addEventListener) return;
            if(clientWidth<750){
//              设置rem的js设置的字体大小
                view_jsset_font=100 * (clientWidth / 750);
//              最终的字体大小为rem字体/系数
                result_font=view_jsset_font/xs;
//              设置根字体大小
                docEl.style.fontSize = result_font + ‘px‘;
                }
            else{
                docEl.style.fontSize = 100 + ‘px‘;
                }
        };
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);
时间: 2024-10-07 02:46:31

移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题的相关文章

解决手机浏览器上input 输入框导致页面放大的问题(记录)

在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

HTML5新元素及其特性 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义

小程序开发之页面布局

Flex布局又称弹性布局,在小程序开发中比较适用.因此将Flex布局相关属性整理如下,搞清楚了这个布局,小程序开发的页面布局就不在话下了. 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C提出了一种新的方案--Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现

ie、firefox、chrome中关于style=&quot;display:block&quot; 引发的页面布局错乱的解决办法

ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:block" 导致页面布局错乱 对table中tr 不显示时,添加style="display:none",ie.chrome.firefox等都没有问题.但是如果想要显示某个tr,就不能使用style="display:block"了,因为,在ie下,可以正常

css禁止用户选择文本(兼容所有浏览器)

css禁止用户选择文本(兼容所有浏览器) 如果让整个页面都禁止选择,可以使用下面的css body{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 如果希望指定元素禁止访问,请看下面的示例代码: <!doctype html> <html

使用预定义的页面布局

Modern UI for WPF自带了一组页面布局.Modern UI page是继承自control控件的,Page通过是通过ModernWindow.MenuLinkGroups属性来引用显示在内容区域.本章节描述了各种不同的布局,并眼熟如何使用它们. *提示:描述的页面布局同样也适用于Visual Studio 2012的页面模板,更多详细内容请参读 Modern UI for WPF Templates 扩展说明. 1:Basic Layout(基本布局) Basic layout使用

第130天:移动端-rem布局

一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于移动端rem布局方案,这大致是网易H5的适配方案.不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用. 网易云的方案总结为:根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等,动态调节html的font-size大小. 淘宝的方案总结为:根据设备设备像素比设置scale的值,保

一看就懂得移动端rem布局、rem如何换算

这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有欠缺的地方,大神们可以指出错误或者改进. function intiSize(){ //获取当前浏览器窗口宽度(这里的实质就是body宽度) var win_w=document.body.offsetWidth; //定义变量 var fontSize; if(win_w>640){ fontSi

移动端rem布局的学习(基于一个网易云播放页面的思考)

对于一个前端的初学者来说,首先要做好的事就是切页面了,切页面不得不说的就是布局了,布局的重要性不言而喻,为了良好的用户体验,提出了许多不一样的布局:响应式布局,弹性布局,流动布局等等,也流入出了许多的框架.最近在看关于移动端的响应式布局,其中涉及到比较多的就是大小属性的设置:px.vw.vh.%.em.rem等等,今天自己就捋一捋rem的用法. 说在前面 一想到写移动端的页面,就要考虑自己写的页面能够适应各种不同的移动设备,起初想想要做到感觉好难啊,最初想到的就是用第三方的框架,用别人写的东西应