2010-08-30 137 views
14

所以我希望用戶能夠在我的網站上看到我的背景。目前,我的網站寬度爲,當您在移動瀏覽器(例如iPhone,Opera Mini)中查看網站時,它會放大文字,並且用戶看不到背景。如何讓我的網站在手機上默認縮小?

我試過使用meta viewport標記失敗。如何讓我的網站在移動瀏覽器上默認縮小?

編輯:

這是到目前爲止,我已經試過代碼:

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

回答

18

我知道這是一個老問題,但無論如何我都會回答,以防其他人需要答案。

截至2011年9月,Opera Mini仍在使用Presto渲染引擎2.5版本。在Presto 2.7之前,視口在Opera中不可用。 (Opera移動,我們的智能手機瀏覽器確實支持視窗)

試試這個:

<meta name="viewport" content="initial-scale=0.25"> 

當你包括width=device-width,瀏覽器「神奇」 **找到的內容區域,並調整它來填充設備的寬度。如果您希望通過背景進行瀏覽,則需要縮小整個頁面以適合視口。

離開<meta name=viewport>完全可以工作,但你通常會看到較少的背景圖像。

但是,理想情況下,您還應該使用媒體查詢來創建適用於各種寬度的網站。

**使用某種瀏覽器開發人員能夠比我更好地解釋的啓發式。

+0

這讓我感到非常緊張。感謝這個雖然很大的幫助 – locrizak 2011-10-25 19:30:52

1

我很驚訝meta viewport沒有爲你工作(在移動Safari瀏覽器)。你可以發佈你使用的?

UPDATE:這一般適用於我......試試看:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> 

如果這樣的作品,那麼你就可以開始與刻度值播放,讓用戶放大,如果他們想以及多少。

+0

好吧,我用我正在使用的代碼更新了我的問題。 – Kredns 2010-08-30 15:00:45

+0

我試過了。它仍然放大。請參閱:http://bellasbowz.com – Kredns 2010-08-30 20:08:03

+0

此解決方案強制瀏覽器被放大,而不是像問題那樣縮小。 – Steve 2014-03-13 11:30:23

5

經過多次試驗和錯誤,我得到以下在iPhone 5.0.1和Android 2.3.6上正常工作。該網站的設計寬度爲480。根據您網站的寬度,您必須使用iPhone的寬度值。

<meta name="viewport" content="width=520, target-densitydpi=high-dpi" /> 
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" /> 
<meta name="HandheldFriendly" content="true" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
+0

我不得不把更大的寬度(1300),使其工作。 +1因爲我很絕望。 – 2014-02-20 15:20:57