參考：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

?

一、網頁手機wap2.0網頁的head里加入下面這條元標簽，在iPhone的瀏覽器中頁面將以原始大小顯示，并不允許縮放。

?

其中： width - viewport的寬度 height - viewport的高度 initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例 maximum-scale - 允許用戶縮放到的最大比例 user-scalable -
用戶是否可以手動縮放c

二、關于meta的詳細介紹請參考

三、下文是關于Meta的例子的詳細介紹?原文地址

3. Meta元素可視區

默認情況下，iPhone上的Safari會象在大屏幕的 桌面瀏覽器那樣顯示你的頁面，寬度達到了980像素，然后縮小內容以適應iPhone的小屏幕，因此用戶在iPhone看這個頁面時感覺字體就比較小了， 也比較模糊，必須要放大才能看得真切，對于一個普通的Web頁面似乎可以接受，但對于一個常用的應用程序就沒幾個人能夠受得了。

幸運的是可以使用特殊的Meta元素可視區進行糾正：

<</SPAN>meta
name="viewport"?content="width=device-width"/>

這個元素通知瀏覽器使用設備的寬度作為可視區的寬度，而不是默認的980像素了，我們可以看看兩個不同的例子。

例3(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/no- viewport.html)顯示了一個簡單的段落元素，沒有Meta元素可視區，字體有點模糊。在iPhone中運行的實際情況如下圖所示。

圖 1 無可視區的顯示效果

例4(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips /viewport.html)包括了一個可視區元素，現在設備寬度只有320像素，字體也比前一個例子更清晰了。在iPhone中運行的實際情況如下圖 所示。

圖 2 有可視區的顯示效果

另外，你還可以手動設置device-width的值，例如，假設你的博客頁面的寬度是750像素，那么桌面屏幕最佳大小就是800x600像素，例 5(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips /fixed750.html)顯示了一個刪減版本，如果你在iPhone中瀏覽它，你會看到980像素剩下的空間都填充了白色。

為了消除額外的空間，可以使用meta元素可視區將寬度設為780像素：

<</SPAN>meta
name="viewport"?content="width=780"/>

例6(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)顯示了meta元素可視區布局被固定后的效果。

Meta元素可視區的內容可以包括多個逗號分隔的值，如initial-scale –
用戶最初看到頁面時的放大級別，對于Web應用程序，一個常見的設置是：

<</SPAN>meta
name="viewport"?content="width=device-width,initial-scale=1,user-scalable=no"/>

這個元素設置寬度為設備的最大寬度，禁止用戶放大和縮小

轉載于:https://www.cnblogs.com/bxzz/p/4184299.html

總結

以上是生活随笔為你收集整理的手机页面尺寸设置（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。