微信屏幕宽度自适应
2016-04-21 09:36
676 查看
环境：硬件)iphone5s,SAMSUNG SM-T810+Android 5.0.2; 软件) 微信 WeChat6.3.13;
问题：使用类似于<meta name="viewport" content="width=595, height=841" />这样的标签在air2,pad2效果很好，但是跑到iphone5s会有滚动条，左右可以拖动，被老大要求调整为不可拖动的。
解决：
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" id="webviewport" content="width=595, height=841" userwidth="595" userheight="841" />
<script type="text/javascript">
adjustWidth();
window.addEventListener("onorientationchange" in window ? "orientationchange" : adjustWidth, adjustWidth, false);
function adjustWidth() {
var viewport = document.getElementById('webviewport');
var userWidth = parseInt(viewport.getAttribute('userWidth'));
var userHeight = parseInt(viewport.getAttribute('userHeight')W);
if (window.orientation == 180 || window.orientation == 0) {
//document.write("手机竖屏状态！");
if (window.devicePixelRatio * screen.width < userWidth) {//设备分辨率(宽)不足
if (userWidth < 312.5) {//微信
viewport.setAttribute('content', 'width=device-width,initial-scale=1');
}
else if (userWidth >= 312.5 && userWidth < 1274) {
viewport.setAttribute('content', 'width=device-width,initial-scale=' + (305 / userWidth)); //index.html
}
}
else {
}
}
if (window.orientation == 90 || window.orientation == -90) {
//document.write("手机横屏状态！");
viewport.setAttribute('content', 'width=' + userWidth + ',height=' + userHeight);
}
}
</script>
</head>
<body style="width: 595px; height: 841px; background-color: #ff0000">
</body>
</html>
html刚入门，如有问题，望指出
参考：http://www.cnblogs.com/2050/p/3877280.html
http://www.cnblogs.com/hejia/p/4123592.html
问题：使用类似于<meta name="viewport" content="width=595, height=841" />这样的标签在air2,pad2效果很好，但是跑到iphone5s会有滚动条，左右可以拖动，被老大要求调整为不可拖动的。
解决：
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" id="webviewport" content="width=595, height=841" userwidth="595" userheight="841" />
<script type="text/javascript">
adjustWidth();
window.addEventListener("onorientationchange" in window ? "orientationchange" : adjustWidth, adjustWidth, false);
function adjustWidth() {
var viewport = document.getElementById('webviewport');
var userWidth = parseInt(viewport.getAttribute('userWidth'));
var userHeight = parseInt(viewport.getAttribute('userHeight')W);
if (window.orientation == 180 || window.orientation == 0) {
//document.write("手机竖屏状态！");
if (window.devicePixelRatio * screen.width < userWidth) {//设备分辨率(宽)不足
if (userWidth < 312.5) {//微信
viewport.setAttribute('content', 'width=device-width,initial-scale=1');
}
else if (userWidth >= 312.5 && userWidth < 1274) {
viewport.setAttribute('content', 'width=device-width,initial-scale=' + (305 / userWidth)); //index.html
}
}
else {
}
}
if (window.orientation == 90 || window.orientation == -90) {
//document.write("手机横屏状态！");
viewport.setAttribute('content', 'width=' + userWidth + ',height=' + userHeight);
}
}
</script>
</head>
<body style="width: 595px; height: 841px; background-color: #ff0000">
</body>
</html>
html刚入门，如有问题，望指出
参考：http://www.cnblogs.com/2050/p/3877280.html
http://www.cnblogs.com/hejia/p/4123592.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 