根據瀏覽器尺寸調整視口

我想在網站上展示平板電腦應用程序的演示（定位桌面瀏覽器）。我選擇了iPad 2作爲分辨率爲1024x768的演示版。添加iPad透明圖形封面，演示最終尺寸爲1210x1315px。根據瀏覽器尺寸調整視口

有了這樣的分辨率，大部分屏幕將會太小而無法正確顯示演示。我不想手動調整所有設計的大小，或者在不知道相關比例的情況下使用CSS transform。因此，我正在尋找一種根據可用顯示分辨率自動調整設計大小的方法。

我試圖用@-viewport財產，但沒有成功...

這裏是我的非工作代碼：

@media (min-height: 1400px) { /* if the screen's height is smaller than 1400px... */ 
    @-viewport{ 
     height:1400px; /* ... then, let's pretend it's 1400px high*/ 
    } 
}

我也試過這樣：

<meta name="viewport" content="height=1400, initial-scale=1" />

編輯：jQuery解決方法：

function resize(){ 
    var documentHeight = $(document).innerHeight(); 
    var targetedHeight = 1500; 
    if (documentHeight < targetedHeight){ 
     var ratio = documentHeight/targetedHeight; 
     $('#container').css('transform','scale('+ratio+')'); 
     $('#container').css('-webkit-transform','scale('+ratio+')'); 
     $('#container').css('-moz-transform','scale('+ratio+')'); 
     $('#container').css('-ms-transform','scale('+ratio+')'); 
     $('#container').css('-o-transform','scale('+ratio+')'); 
    } 
}

這是我最終做到的，以達到預期的結果。我會者優先純CSS解決方案...

來源

2013-10-24 Yako

，我認爲你應該使用媒體查詢：Logic in Media Queries

來源

2013-10-24 19:42:28 mikkelz

我想是。因此我通過添加一些代碼來編輯我的問題。我必須或多或少地誤解了@ -viewport概念...... – Yako

根據瀏覽器尺寸調整視口

回答

相關問題