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

Image's height same to Phone/Tablet height - only works properly in Chrome

本文关键字：高度 Chrome 常工作 -只 工作 手机 图片 平板电脑      更新时间：2023-11-24

我正在一个投资组合网站上工作。多亏了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 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使用窗口的全宽。移动Opera浏览器：啊。。。我没有要在Safari中测试的更改。桌面Safari是否有任何用户代理扩展？

看来我需要接受Firefox现在是个坏人的事实。

第2版：

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

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

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

我也不认为这是必要的：

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

编辑

然后你应该玩CSS3图像属性作为封面，包含，等等

也可以触发新的

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

每次方位变化（我记得是无方位变化事件或非常类似）

相关文章：