如何在啓用CSS3的網站上支持更多的移動視口寬度並強制移動瀏覽器使用適當的寬度？

我有固定寬度爲1000px的網站。我想支持這個頁面的兩個更小的寬度。我有一個像這樣通過CSS媒體查詢成功地做到了這一點：如何在啓用CSS3的網站上支持更多的移動視口寬度並強制移動瀏覽器使用適當的寬度？

@media only screen and (min-width : 800px) and (max-width : 999px) { 
    #content { width:800px; } 
} 
@media only screen and (max-width : 799px) { 
    #content { width:600px; } 
}

現在，當我測試我的Android瀏覽器（2.3.3）的網頁，它採用的1000像素寬度視所以它顯示的網站在整個寬度。但是，如果它選擇800px的視口寬度，會更好，因爲對於顯示器較小的設備，網頁會顯示得更加優化。

我知道我可以使用例如：<meta name="viewport" content="width=800px" />來設置視口寬度，或者使用<meta name="viewport" content="width=device-width" />來設置寬度相應的設備物理寬度，但這些都不起作用。因爲在第一種情況下，要麼強制所有移動設備始終使用800像素的視口，要麼在第二種情況下使用設備上的像素的物理寬度，但這種方式也無法解決，因爲在肖像模式下（大多數人如何瀏覽移動設備網頁和使用手機），這將是300px或至多400px，這是太小，用戶將不得不水平滾動很多。

所以實際上我的問題是這樣的 - 我可以支持並可能強制移動瀏覽器根據其實際屏幕大小使用不同的視口寬度嗎？我不知道我是否足夠正確地解釋它，所以我會舉例說明我想達到的效果：

對於物理寬度爲400像素（具有更大顯示器的現代設備）的移動設備，我想強制使用800像素的視口寬度和可能的比例爲0.5，因此在首頁訪問時將顯示完整而不需要水平滾動並且具有用戶選項以放大頁面的部分。

對於物理寬度爲300像素（某些中低檔設備）或更小的移動設備，我想強制使用600像素寬度的視口，並可能使用比例0.5，因此首次訪問時將顯示完整或屏幕上最少的大部分都需要水平滾動。當然，用戶可以放大頁面的某些部分。

這是可能的使用CSS或CSS3設置？我可以想象JS解決方案，但我想僅僅使用CSS來實現它。

感謝您提前給予任何幫助。

來源

2011-12-31 Frodik

你有沒有想過這個？我正在尋找確切的事情。 – pkrish 2013-01-22 19:52:35

沒關係。弄清楚了。看到我的答案。 – pkrish 2013-01-22 22:08:43

我明白你的問題的某些部分...我的工作主要是在iPhone/iPad設備，減少對Android的的...

我會建議使用

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

設置基於寬度的視口..

現在即使你說，它不會在iPhone/iPad的方向改變上工作，無論是方向，設備寬度總是768px。

所以ATLEAST在這些設備上，設置設備寬度就可以了..

對於Android設備，我真的不知道，如果在每個方向返回裝置寬度不同.. 我的猜測是它應該是一樣的。

你可以請嘗試設置上面的元標記，看看它是否正常工作。如果不是，我可以建議其他方式..

謝謝。

來源

2012-01-01 13:35:10 testndtv

這正是我不想做的。因爲如果我使用「width = device-width」，那麼視口寬度爲300px的手機只能看到600px頁面的一半。但我期望的目標是這個設備會看到一半縮小頁面（600px寬度頁面縮放到300px物理設備寬度）。 – Frodik 2012-01-01 13:42:16

好的...所以你可以通過添加0.5的初始縮放結合元語句，這應該縮小到能夠看到整個頁面。 – testndtv 2012-01-01 17:11:13

我不能，因爲我不想爲所有人設置設備，這也是我問這個問題的原因。設置初始縮放0.5對於具有較大屏幕的設備來說沒有任何意義，例如， 800像素。然後頁面會呈現得很小。我問這個問題的原因是我想使用適合多個視口的媒體查詢。 – Frodik 2012-01-01 17:38:46

下面是一些CSS，可以幫助您：

// target small screens (mobile devices or small desktop windows) 
@media only screen and (max-width: 480px) { 
/* CSS goes here */ 
} 

/* high resolution screens */ 
@media (-webkit-min-device-pixel-ratio: 2), 
     (min--moz-device-pixel-ratio: 2), 
     (min-resolution: 300dpi) { 
header { background-image: url(header-highres.png); } 
} 

/* low resolution screens */ 
@media (-webkit-max-device-pixel-ratio: 1.5), 
     (max--moz-device-pixel-ratio: 1.5), 
     (max-resolution: 299dpi) { 
header { background-image: url(header-lowres.png); } 
}

如果沒有讀通過這個環節

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

來源

2012-01-06 14:07:03 Matt

只是增加了幾個媒體查詢和CSS變焦

//base setting, overwrite with other queries 
#content { width:800px; } 

@media only screen and (max-width : 799px) { 
    #content { width:600px; } 
} 

@media only screen and (min-width : 400px) and (max-width :599px) { 
    #content { width:800px;} 
//don't need to set zoom as it is handled by the next media query 

} 
@media only screen and (max-width : 599px} 
    body{zoom:200%} 
//don't need to set #content as it has a default value of 600 set in the first media query. 
}

您還可以通過執行用戶代理嗅探來設置初始縮放比例，或者通過基於widow大小的javascript添加它，但是僅通過CSS，您可以使用縮放來放大（用戶可以始終縮小）

來源

2012-01-07 13:10:34

您是否嘗試過完全縮小，然後讓用戶縮放以查看任何內容它是你想要的？

嘗試：

<meta name="viewport" content="width=device-width,minimum-scale=0.25,height=device-height,user-scalable=yes" />

來源

2012-08-28 21:01:06

你可以通過讓視元素（通過ID或名稱），並通過檢查上飛screen.width或window.outerWidth設置它這樣做在JavaScript。

function setViewport() { 
    var viewport = document.getElemementById("viewport"); 


    if(window.outerWidth <= 400) { 
     //screen.width gives display pixel count, use window.outerWidth for physical pixel count. 
     viewport.setAttribute('content', 'width=800); 
    } 
}

來源

2013-01-22 22:07:46 pkrish

如何在啓用CSS3的網站上支持更多的移動視口寬度並強制移動瀏覽器使用適當的寬度？

回答

相關問題