將網頁調整爲適合屏幕

我有一個網站，我想要遵循瀏覽器窗口的大小調整，以便它始終適合。我試着用當前窗口寬度除以全屏窗口寬度給出的比率來使用css transform scale屬性。它確實重新縮放，但一定會出現問題，因爲它會在內容的左側和右側留下白色塊（因此它會縮小網站太多，然後居中放置在窗口中）以下是JavaScript代碼：將網頁調整爲適合屏幕

$(window).resize(function(){ 
      var ratio = $(window).width()/1340; 
       $('body').css('transform','scale('+(ratio)+')'); 
       $('body').css('-ms-transform','scale('+(ratio)+')'); 
       $('body').css('-moz-transform','scale('+(ratio)+')'); 
       $('body').css('-webkit-transform','scale('+(ratio)+')'); 
    });

有沒有更好的方法來使頁面適合窗口（或正確縮放比例）？

來源

2013-10-25 user1507558

是...使用媒體查詢。 –

你有沒有考慮過使用全屏API？ – Gaurav

使用媒體查詢將意味着重新調整整個樣式，並且全屏API仍然是實驗性的。我只想知道我是否可以使用這個特殊技巧來給我一個正確的結果。 – user1507558

什麼你想要做的是建立使用響應和適應性方法的網站。看看這個鏈接是否有幫助！ http://www.imediaconnection.com/content/33435.asp#singleview

來源

2013-10-25 20:38:39

你可以利用這一點，把整個內容裏面

#wrapper{ 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    overflow:hidden; 
}

來源

2013-10-25 20:30:40

爲了使您的網站的移動友好的，你真的應該想想使其使用響應媒體查詢或使用像引導，基金會等

一些前端框架，或者，如果你只是想擴展您的網站，所以它不應該橫向縮放並適合用戶的屏幕（無論您的UI組件變得多小）您可以通過在頭部添加以下元標記來實現這一點。

<meta name="viewport" content="width=device-width, initial-scale=1">

它會強制瀏覽器保持足夠的網站以適應移動屏幕寬度。

希望它會有所幫助。

來源

2016-12-17 11:05:34

使用

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

在HTML頭中

和

@media only screen and 
(min-device-width : screen px) and 
(max-device-width : screen px) { 
    #id{style} 
}

在CSS

。

來源

2016-12-17 11:43:04 user22191

將網頁調整爲適合屏幕

回答

相關問題