javascript - 图片的高度与手机/平板电脑的高度相同 - 只能在 Chrome 中正常工作

Question

我正在做一个投资组合网站。多亏了 mobile_detect.php，我使用了响应式+自适应设计。台式机和手持设备的特定代码永远不会相互相遇。

请为 Chrome 下载“Chrome 用户代理切换器”扩展程序: https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg

对于 Firefox，“用户代理切换器”: 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/scripts-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 浏览器:呸……我没有零钱要在 Safari 中测试。是否有用于桌面 Safari 的用户代理扩展？

看来我需要忍受 Firefox 现在是个坏人。

编辑2:

我不懂 JavaScript。我们如何根据宽度和高度计算图像的纵横比并将大小调整为 $(window).height()？

Answer 1

尝试用高度替换最大高度；

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

我也不认为这是必要的:

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

编辑

然后你应该使用 CSS3 图像属性作为封面、包含等。

也触发一个新的

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

每次方向改变(我记得是onorientationchange事件或非常相似)