圖像的高度與手機/平板電腦高度相同 - 只在Chrome中正常工作

Question

我正在組合網站上工作。感謝mobile_detect.php，我使用了響應+自適應設計。桌面和手持設備的具體代碼永遠不會相互滿足。

請下載Chrome瀏覽器「用戶代理切換器Chrome瀏覽器」擴展名： https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg

而對於火狐「用戶代理切換器」： https://addons.mozilla.org/hu/firefox/addon/user-agent-switcher/

（它更容易測試桌面和故障排除，比移動設備我的網站究竟長得一模一樣的移動桌面版Chrome和Firefox）

HTML結構：。

<div id="content"> 
<div class="horgallery"> 
    <ul class="images"> 
    <li><img src="portfolio/eskuvo/k/lantosistvan-eskuvo-001-1024px.jpg" alt="" /></li> 
    <li><img src="portfolio/eskuvo/k/lantosistvan-eskuvo-002-1024px.jpg" alt="" /></li> 
    <li><img src="portfolio/eskuvo/k/lantosistvan-eskuvo-003-1024px.jpg" alt="" /></li> 
    </ul><!-- .images --> 
</div><!-- .horgallery --> 
</div><!-- #content --> 

個

JS /腳本-mobile.js：

// Vertical image resize for Mobile/Tablet Window height 
$(document).ready(function(){ 
function horgalleryImagesSize(all) { 
    windowHeight = $(window).height(); 
    if (all) { 
     $('.horgallery .images li').css({'max-height': windowHeight}); 
    } 
} 
$(document).ready(horgalleryImagesSize); // Trigger calculation 
$(window).resize(horgalleryImagesSize); // Trigger Resize REAL-TIME 
}); 

CSS/mobile.css：

.horgallery .images li { float: none; clear: both; display: block; position: relative; } 
.horgallery .images img { float: none; max-width: 100%; max-height: 100%; } 
.horgallery .images li { padding: 0 0 30px 0; text-align: center; } 

問題：

• 的設計只適用於我的口味在最新Chrome桌面版和移動版。
• Firefox桌面和移動設備顯示全屏幕圖像的圖像，但剪切了高於屏幕高度的圖像部分（javascript在他的工作中沒有問題）。
• Android手機瀏覽器似乎調整了圖像的大小，但是當完成加載時，底部填充消失並且垂直圖像溢出鄰居。

我需要垂直圖像永遠不會超過實際屏幕高度。

另外我想要滑動功能（在屏幕中心完全滑動，在這種情況下，圖像完美地將垂直覆蓋屏幕高度），但這對於後面的問題是一個問題）。

我使用Android 4.3在Genymotion模擬器中測試了我的網站。

另一種選擇是實時保持圖像寬高比並將其高度設置爲窗口高度。但我不是一個JavaScript程序員，我不知道該怎麼做。編輯： 感謝聖地亞哥！

// Vertical image resize for Mobile/Tablet Window heigh 
$(document).ready(function(){ 
screen.addEventListener("orientationchange", function horgalleryImagesSize(all) { 
    windowHeight = $(window).height(); 
    if (all) { 
     $('.horgallery .images li').css({'height': windowHeight}); 
    } 
}) 
$(document).ready(horgalleryImagesSize); // Trigger calculation 
$(window).resize(horgalleryImagesSize); // Trigger Resize REAL-TIME 
}); 

解決原生Android瀏覽器中的問題。 Chrome很棒。 Firefox使用窗口的整個寬度。 Mobile Opera瀏覽器：Bahh ...我沒有更改在Safari中進行測試。是否有任何桌面Safari的用戶代理擴展？

好像我需要忍受它，Firefox現在是一個壞人。

EDIT2：

我不知道的JavaScript。我們如何從寬度和高度計算圖像的縱橫比並調整爲$(window).height()？

Answer 1

嘗試用高度替換最大高度;

$('.horgallery .images li').css({'height': windowHeight}); 

還我不認爲這是necesary：

$(window).resize(horgalleryImagesSize); // Trigger Resize REAL-TIME 

編輯

，那麼你應該與ATTR CSS3圖像發揮覆蓋，包含等

也觸發新

$('.horgallery .images li').css({'height': windowHeight}); 

每次方向改變（我記得是onorientationchange事件還是很相似）