爲手機客戶端製作網頁更薄

-1

不幸的是，手機具有如此高的屏幕分辨率，我的網站對它來說很小。它在桌面瀏覽器中放大時可以很好地適應，但不幸的是，在移動瀏覽器中，一旦放大，網頁視口大小實際上不會改變。爲了嘗試解決這個問題，我已經獲得了一個腳本來檢測移動用戶代理，然後將主體寬度設置爲500px，這看起來是完美的寬度，但不幸的是即使設置了元數據後，移動瀏覽器也沒有將其視口設置爲500爲視口500，這導致我的網頁呈現在瀏覽器的角落。一旦放大，看起來不錯，但這不是我想要的。我的網站在某種程度上類似於nokia.com，我希望它在移動客戶端上的行爲方式相同。爲手機客戶端製作網頁更薄

有人能告訴我什麼是正確的程序是做這樣的事情，因爲我絕不是一個適當的Web開發人員，我只是這樣做的學習。

這裏是我的薈萃：

<meta name="viewport" content="width=500,initial-scale=1,maximum-scale=1,user-scalable=no">

來源

2014-01-13 Gerharddc

終於解決了！這似乎是我遇到這麼多麻煩的原因，因爲我測試的移動設備是Windows Phone 8設備，顯然WP8對視口元標記的反應並不理想。這很容易通過添加MobileOptimized元標記來解決。

來源

2014-01-14 10:03:32 Gerharddc

你需要寫有條件的CSS規則對於較小尺寸的瀏覽器。

一個例子： @media screen and (min-width: 768px) { .item1{} .item2{} }

這是我剛剛經歷了快速谷歌搜索應該是能夠得到你至少開始發現了一個網站。 http://www.conditional-css.com/usage

祝你好運！

來源

2014-01-13 17:32:52 Michele

+1正是我的意思。 :) –

我很抱歉，但你能否詳細說明我應該在移動樣式表中做什麼不同的事情？ – Gerharddc

你實質上是製作兩個網站。如果你經常使用瀏覽器，它會加載正常的樣式。如果你在移動設備上載入移動樣式。這裏是另一篇文章閱讀：http://css-tricks.com/resolution-specific-stylesheets/ – Michele

這是更好地使用@media查詢（可以是CSS3）

喜歡的東西：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) /* You can change this value per your requirements */ 
{ 
    /* Your custom styles for mobile device */ 
}

來源

2014-01-13 17:33:40

我很抱歉，但你能否詳細說明什麼類型的事情，我應該做不同的手機樣式表？ – Gerharddc

使用兩個查詢，一個用於移動設備，另一個用於桌面/平板電腦（'@media only screen and（min-device-width：481px）'）。爲這兩個條件輸入樣式。在移動設備條件下，您可以執行如下操作：'max-width：480px;'等。您可以更改背景圖像。可能性是無限的，這完全取決於你。;） –

是的，我明白，但在CSS中我可以做什麼不同的手機版本，例如設置身體寬度爲500px有影響的地方仍然很小的效果 – Gerharddc

試試這個

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

，並使用媒體查詢目標的所有屏幕尺寸

http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport

希望這可以幫到你

來源

2014-01-13 17:44:12 wanderer

我很抱歉，但它似乎並不如果所有的瀏覽器支持這一點，它絕對不會對我工作 – Gerharddc

我完全在這個媒體查詢的東西丟失，但額外的比例參數幾乎已經解決了我的問題，它現在正確填充屏幕，除了事實它現在被默認放大，你必須縮小。有沒有什麼方法可以爲此設置初始縮放屬性。 – Gerharddc

@Gerhman用這個替換你的meta標籤。這會將視圖縮放到默認比例，取設備的內容寬度。希望這可以幫到你 – wanderer

爲手機客戶端製作網頁更薄

回答

相關問題