在大屏幕上正確放大網站

我有一個網站，我在本地工作，它將通過投影儀進行展示。有沒有辦法讓我將其縮放到投影的全尺寸，或者是否將它顯示在更大的屏幕上，而無需使用所有媒體查詢！我試圖加入：在大屏幕上正確放大網站

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

但我不認爲它會做的伎倆！從您的任何輸入歡迎

編輯：想我要補充一點，該網站是在原尺寸1000 * 800的容器，我只是希望它在屏幕上進行變大

來源

2016-02-28 J.Doe.Smith

有沒有辦法告訴你有多大的投影屏幕是從JavaScript（或其他任何東西） – dandavis

你可以放大和縮小，當你第一次加載頁面，'[ctrl] + wheel'或'[ctrl] + [=]' – dandavis

你可能會發現一些幫助使用在這個Q和A中找到的方法：[構建一個響應網站]（http://stackoverflow.com/questions/29971189/constructing-a-responsive -website） – jbutler483

我認爲最好的方法來實現你正在尋找的是使用媒體查詢以及transform : scale();屬性。你可以瞭解更多關於它Here

來源

2016-02-29 00:13:14 eliteware

這就是我也是！謝謝你的幫助 –

增長了一下

如果使用Bootstrap，然後將所有內容包裝在容器中，Fluid-div將使用全屏寬度（因此爲投影寬度）。

<div class="container-fluid"> 
...// content 
</div>

來源

2016-02-28 23:18:06 gavgrif

感謝您的評論，但我沒有使用bootstrap，並且該網站位於1000 * 800的啓動器容器中，我只是希望它在每次屏幕變大時增長一點點 –

媒體查詢是您的朋友！！ :) – gavgrif

我會嘗試讓瀏覽器窗口分辨率，並相應設置的寬度和高度，如果分辨率超出了一個特定的一個。

<script> 
    function setContentSize(){   
     var ww = window.innderWidth; 
     var wh = window.innderHeight; 

     ID.style.width = 1000 +"px"; 
     ID.style.width = 800 +"px"; //ID must be set in HTML 
     if(ww > what you want){ 
      ID.style.width = what you want +"px"; 
     } 
    } 
</script>

等你或許可以解決這個問題

你還可以用window.addEventListener("resize", setContentSize);

來源

2016-02-28 23:35:00 Sens

非常感謝您的回覆隊友，但內容不會因此而混亂嗎？ –

@ J.Doe.Smith沒有問題:)你的意思是？取決於你想要它。通常內容會自動流向它所在div的大小。 – Sens

@ J.Doe.Smith你解決了嗎？ – Sens

加載它要自動縮放整個頁面，一個解決方案是使用transform: scale()。該頁面需要放置在容器內才能使用。首先爲容器中的CSS的由來：

div#page-container { 
    transform-origin: 0 0; 
}

然後用JavaScript改變比例因子（在我的情況的jQuery）：

$(function() { 
    var ratio = $('div#page-container').width()/$(document).width(); 
    $('div#page-container').css('transform', 'scale(' + (1.0/ratio) + ')'); 
});

這裏是一個Fiddle。

來源

2016-02-28 23:57:10

在大屏幕上正確放大網站

回答

相關問題