Home > Web Front-end > HTML Tutorial > 更新手机面input框放大问题_html/css_WEB-ITnose

更新手机面input框放大问题_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:27:38
Original
1222 people have browsed it

对于之前在博客中说的关于手机页面页面放大问题,在这里需要更正一下之前的解决办法,因为之前的那个方法并不能使用所有情况。所以这里将说一下新的解决办法:首先在头部加一个js来获取手机的不同型号对应的并屏幕大小,然后给其加不同的meta属性。如下:

<script>     if(/Android (\d+\.\d+)/.test(navigator.userAgent)){        var version = parseFloat(RegExp.$1);     if(version>2.3){        var phoneScale = parseInt(window.screen.width)/720;        document.write('<meta name="viewport" content="width=720, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', user-scalable=no, target-densitydpi=device-dpi">');        }else{             document.write('<meta name="viewport" content="width=720, target-densitydpi=device-dpi">');        }        }else{             document.write('<meta name="viewport" content="width=720, user-scalable=no, target-densitydpi=device-dpi">');        } </script>
Copy after login

其次就是需要改你的css。即将你的css中所有定了页面最大宽度的具体值全部改成100%.这样就能解决问题了,经测试这个方法对所有常用机型都适用。

本文永久地址:http://blog.it985.com/15435.html

本文出自IT985博客 ,转载时请注明出处及相应链接。

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template