關於手機上顯示網頁自適應大小viewport參數設置

目前在做一個手機網頁自適應屏幕大小時碰到了問題，傳統用以下代碼設置網頁自適應屏幕大小

<meta name="viewport" content="width=device-width">

由於網頁中有圖片，如果按這樣設置，圖片有的竟然會顯示不了，在不同的手機瀏覽器上，顯示結果竟然不一樣，在找遍相關資料如下：

相關資料參考網址：

http://www.xiaocaoge.com/understanding-viewport-and-device-width.html

http://www.cnblogs.com/2050/p/3877280.html

http://blog.csdn.net/aminfo/article/details/40895211

大概的原因明白了，在網頁中設置的1px與物理像素中的1px不會相同，所以導致不同在不同手機上顯示結果都不相同，通過以下設置找到了適合當前網頁自適應不同手機、不同瀏覽器的辦法，代碼如下：

<meta name="viewport" content="width=620px,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=1,maximum-scale=1,user-scalable=1" />

其中的width=620px就是網頁內容區需要的最小寬度，需要在不同手機上剛好全屏顯示，target-densitydpi=device-dpi設置後，css中的1px就會等於物理像素中的1px。

補充：由於safari瀏覽器不支持target-densitydpi=device-dpi，所以加入JS代碼自動調整縮放比例，調整後的代碼：

<style type="text/css">
@viewport
{
	zoom: 1.0;
	width: 620px;
}
@-ms-viewport
{
	width: 620px;
	zoom: 1.0;
}</style>
<meta name="viewport" id="WebViewport" content="width=620px,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<script language="javascript">
if(screen.width<620)
{
	document.getElementById('WebViewport').setAttribute('content', 'width=620px,initial-scale=' + screen.width / 620 + ',target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1');
}
</script>