【解决】移动端设备·横竖屏时页面内容字体大小调整的问题
2017-11-20 19:11
549 查看
首先判断是不是横竖屏导致的问题,所以要代码检验一下。
window.orientation 对象在手机上才可生效。
上面的这串JS代码,就可以检测出移动端设备的横竖屏状态。
那么如何解决·横竖屏时页面内容字体大小呢?这里就要用到 css 的一个属性值了:
设置属性:text-size-adjust : 100%; 这个属性值可以设置移动设备上的横竖屏,字体变化的问题,但必须设置100%。不能设置为none,不然,webkit浏览器无法人为放大文字大小,严重影响可用性。
设置这个属性哪里需要的地方就在哪里设置,如果全文都需要,那就在
window.orientation 对象在手机上才可生效。
<script type="text/javascript"> var evt = "onorientationchange" in window ? "orientationchange" : "resize"; window.addEventListener(evt,resize,false); function resize(fals) { if(window.orientation == 0 || window.orientation == 180) { alert("竖屏"); }else { alert("横屏"); } } resize(true); </script>
上面的这串JS代码,就可以检测出移动端设备的横竖屏状态。
那么如何解决·横竖屏时页面内容字体大小呢?这里就要用到 css 的一个属性值了:
text-size-adjust : none
body { -webkit-text-size-adjust : 100% ; -moz-text-size-adjust : 100% ; -ms-text-size-adjust : 100% ; text-size-adjust : 100%; }
设置属性:text-size-adjust : 100%; 这个属性值可以设置移动设备上的横竖屏,字体变化的问题,但必须设置100%。不能设置为none,不然,webkit浏览器无法人为放大文字大小,严重影响可用性。
设置这个属性哪里需要的地方就在哪里设置,如果全文都需要,那就在
body里面设置属性值。
相关文章推荐
- win7调整文本字体像素大小的问题另类解决方法
- unity在移动端的字体不能调节大小问题解决办法
- 移动端页面以rem为单位设置字体大小不生效解决方法
- 解决iphone横屏时字体变大问题或者内容大小不一样等...
- 解决iphone横屏时字体变大问题或者内容大小不一样等...
- 解决移动端字体大小与设定大小不同的问题
- 解决iphone横屏时字体变大问题或者内容大小不一样等...
- 移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题
- jquery mobile项目 的不同设备的字体大小问题?
- 巧妙解决js内容调用导致页面加载慢的问题
- 移动端Web页面问题解决方案
- 解决手机访问页面字体太小问题
- 解决移动端嵌入Web页时,跳转页面后退缓存问题
- wap页面之iphone设备字体偏大问题
- 解决移动端web页面整个背景图横向滚动问题
- 利用HBuilder将vue项目打包成移动端app,运行页面空白问题解决
- 解决360浏览器和谷歌(Google Chrome)浏览器下CSS设置字体大小小于12px无法生效的问题
- Eclipse设置问题:字体大小、修改注释内容、修改快捷键
- 解决iOS设备屏幕切换时页面造成的问题
- AutoFitTextView-根据文本内容自动调整字体大小的TextView