如何將此網格放入初始窗口大小，但允許用戶縮放？ （無響應）

Question

以下六角形網格（固定爲width和height）應該適合瀏覽器的初始窗口大小。

用戶應該能夠隨意放大（與兩個捏到變焦和/或鍵盤快捷鍵），但在初始狀態，電網應該只是填補了窗口大小。

據我所知，一個響應設計不允許鍵盤縮放（如CMD +在MacOS） - 所以這是不是什麼我要找的。

HTML (DEMO)

<div id="wrapper"> 

    <div class="hex-row"> 
    <div class="hexagon"></div> 
    <div class="hexagon"></div> 
    <div class="hexagon"></div> 
    <div class="hexagon"></div> 
    <div class="hexagon"></div> 
    </div> 

    <div class="hex-row even"> 
    <div class="hexagon"></div> 
    <div class="hexagon"></div> 
    <div class="hexagon"></div> 
    <div class="hexagon"></div> 
    <div class="hexagon"></div> 
    </div> 

</div> 

CSS

.hexagon { 
    position: relative; 
    width: 250px; 
    height: 144.34px; 
    background-color: #33cc99; 
    margin: 72.17px 0; 
    float: left; 
    margin-left: 5.5px; 
    margin-bottom: 5.5px; 
} 

.hexagon:before, 
.hexagon:after { 
    content: ""; 
    position: absolute; 
    width: 0; 
    border-left: 125px solid transparent; 
    border-right: 125px solid transparent; 
} 

.hexagon:before { 
    bottom: 100%; 
    border-bottom: 72.17px solid #33cc99; 
} 

.hexagon:after { 
    top: 100%; 
    width: 0; 
    border-top: 72.17px solid #33cc99; 
} 

.hex-row { 
    clear: left; 
    width: 289vh; 
} 

.hex-row.even { 
    margin-left: 128px; 
    width: 289vh; 
} 

這是我所得到的與預期的效果（右）：

它應該不是必須在手動更改窗口大小時作出響應。

我試圖智取與包裝的網格，但沒有成功。關於怎麼在這裏上的一個簡短的說明，將是有益的：

html, 
body { 
    height: 100%; 
    min-height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#wrapper { 
    height: 100%; 
    min-height: 100%; 
} 

我不知道是否有任何形式的自動「縮小」打開頁面時？

Answer 1

我認爲你需要依靠一個小小的JS來調整窗口高度較小的部分。

此外，您應該使該部分完全響應一致性。

因此，像這樣：

function scaleSection(){ 
 
    var $win = $(window) 
 
    var $wrapper = $('#wrapper'); 
 
    if ($wrapper.outerHeight() > $win.height()) { 
 
    $wrapper.css({ 
 
     'transform': 'scale(' + $win.height()/$wrapper.outerHeight() + ')' 
 
    }) 
 
    }; 
 
} 
 

 
scaleSection(); 
 
$(window).resize(function() { 
 
    scaleSection(); 
 
})

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#wrapper { 
 
\t overflow: hidden; 
 
    padding: 0 0 5%; 
 
    transform-origin: 0 0; 
 
} 
 

 
.hexagon { 
 
    position: relative; 
 
    width: 17.5%; 
 
    background-color: #33cc99; 
 
    margin: 5.5% 0; 
 
    padding: 0 0 9.7%; 
 
    float: left; 
 
    margin-left: 0.7%; 
 
    margin-bottom: 0.5%; 
 
} 
 

 
.hexagon:before, 
 
.hexagon:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0; 
 
    border-left: 8vw solid transparent; 
 
    border-right: 8vw solid transparent; 
 
} 
 

 
.hexagon:before { 
 
    bottom: 100%; 
 
    border-bottom: 5vw solid #33cc99; 
 
} 
 

 
.hexagon:after { 
 
    top: 100%; 
 
    width: 0; 
 
    border-top: 5vw solid #33cc99; 
 
} 
 

 
.hex-row { 
 
    clear: left; 
 
    margin-right: 8.4%; 
 
} 
 

 
.hex-row.even { 
 
    margin: 0 0 0 8.4%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="hex-row"> 
 
    <div class="hexagon" style="float:left"></div> 
 
    <div class="hexagon" style="float:left"></div> 
 
    <div class="hexagon" style="float:left"></div> 
 
    <div class="hexagon" style="float:left"></div> 
 
    <div class="hexagon" style="float:left"></div> 
 
    </div> 
 
    <div class="hex-row even"> 
 
    <div class="hexagon" style="float: left"></div> 
 
    <div class="hexagon" style="float: left"></div> 
 
    <div class="hexagon" style="float: left"></div> 
 
    <div class="hexagon" style="float: left"></div> 
 
    <div class="hexagon" style="float: left"></div> 
 
    </div> 
 
</div>