作为一个程序员的博客，必然会引用很多的代码块，为了尽可能让代码块不至于太乱，于是就考虑将页面的最小宽度设置为768px。在桌面版本并不会有太大的问题，但在移动设备（Android手机）上用Chrome浏览时，页面总是超出屏幕很多，使得你每一次打开页面都得进行缩放的操作。于是考虑用viewport来解决：设置initial-scale来解决。
- 关于viewport:
在html->head->meta中定义，可以设置content的width和initial-scale, maximum-scale, minimum-scale等等。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
Nexus 4上viewport中的”device-width”到底有多大呢，可以用window.innerWidth来获取：
<body>
<script type="text/javascript">
document.write("device-width=" + window.innerWidth);
</script>
</body
- 用java script重新设置viewport
<script type="text/javascript">
function br_update_meta_viewport() {
var brWebMinWidth = 783; // The minimum width of the page
var brWinWidth = 0;
if (screen.availWidth) {
brWinWidth = screen.availWidth;
}
if (brWinWidth == 0 || brWinWidth > brWebMinWidth) {
return;
}
var brScale = brWinWidth / brWebMinWidth;
var metaContent = "width=" + brWinWidth + ", initial-scale=" + brScale;
var metaElements = document.getElementsByTagName('meta');
for (var i = 0; i < metaElements.length; i++) {
var meta = metaElements[i];
if (meta.getAttribute('name') == "viewport") {
if (meta.getAttribute('content') == metaContent) {
break;
}
meta.setAttribute('content', metaContent);
break;
}
}
}
window.addEventListener('resize', br_update_meta_viewport);
br_update_meta_viewport();
</script>
NOTE:
使用这个java script还是不能解决这个问题，明天再看看怎么改进。
原来，我所需要的效果只需要将html->head->meta中的定义删除，同时指定html->body的min-width为768px就行了。先暂时这样了。
参考文档：
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag