我正在一个投资组合网站上工作。多亏了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});
每次方位变化(我记得是无方位变化事件或非常类似)