媒體查詢看起來在瀏覽器比移動設備

即時通訊使用此查詢移植佈局方式不同：媒體查詢看起來在瀏覽器比移動設備

@media screen and (min-width : 320px) and (max-width : 640px)

這是網址：http://www2.madeinweb.com.br/jobs/adc/prototype/html/

我是用調整瀏覽器開始與唯一的工作。但當我試圖檢查移動設備（iphone 4，5，ipod 4和galaxy S2）時，情況截然不同，非常不同。所以我開始着眼於移動視圖（這是一個web視圖，所以瀏覽調整其大小不關心），但是當我試圖從Galaxy S3查看它時，結果幾乎與瀏覽器（可怕）。

我知道S3的行爲應該是這樣（據我所知），因爲它與瀏覽器的方式相同，但其他設備如何，我在那裏做錯了什麼？

來源

2013-03-05 fernandofleury

看看Galaxy S2上的鏈接似乎按預期工作。內容對於屏幕來說有點太大，所以有些部分被切斷，但是其他方式可以正常工作。 – DominicM 2013-03-05 14:52:06

我看到你已經添加了元標記形式我的問題，所以也許這解決了問題，因爲我只發佈答案後在移動設備上測試:) – DominicM 2013-03-05 14:53:44

@DominicM，我已經添加了標籤，因爲現在很長一段時間。 – fernandofleury 2013-03-05 15:26:08

移動設備通常會縮放內容以適應屏幕，因此您需要告訴設備該網站適合移動設備且不需要縮放像素。

在HTML文件的頭部添加此：

<meta content="True" name="HandheldFriendly"> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> 
<meta name="viewport" content="width=device-width">

這應該對大多數Android設備上工作，iPhone可能會或可能不會需要不同的meta標籤。

來源

2013-03-05 14:34:02 DominicM

你確定'maximum-scale = 1.0;'是個好主意嗎？它不會阻止放大頁面嗎？ – wei2912 2013-03-05 15:18:01

我剛剛在Galaxy S2上測試過，是的，你不能放大，但縮放呈現任何媒體查詢無用，所以這是一個公平的折衷，我認爲。我不知道另一種防止縮放的方法。此外，如果您使用響應式設計，則不需要縮放，因爲如果正確完成，網站應該完全適合該設備，由於縮放無法獲得質量或額外的細節，因此變焦無用。 – DominicM 2013-03-05 15:27:12

啊，其實我想殺死縮放行爲。所以它工作。 – fernandofleury 2013-03-05 15:29:12

媒體查詢看起來在瀏覽器比移動設備

回答

相關問題