简体繁体 English

即使最大宽度为100％，图像在iPhone上的显示效果也不佳

[英]Image does not display well on iphone even with max-width:100%

原文 2016-05-18 03:05:21 1 2 javascript/ css

i am working on my website: http://www.antologiaoliveoil.com/ES/index.html 我正在我的网站上工作： http : //www.antologiaoliveoil.com/ES/index.html

All looking good, however, when I preview this on Iphone, the image called Lataorganica.jpg does not display well on the first time it shows up on vertically, and the slider does not work. 但是，看起来都很不错，当我在Iphone上预览时，名为Lataorganica.jpg的图像在第一次垂直显示时显示不佳，并且滑块不起作用。 Once I rotate the iPhone horizontally, and then back vertically it works fine. 当我水平旋转iPhone，然后垂直返回时，它可以正常工作。

any idea anyone? 有人知道吗？

Many thanks 非常感谢

2 个解决方案

Part of the problem you have is that your text is in your image. 您遇到的部分问题是您的文字在图像中。 On an iPhone or other mobile device where the width is very small, all the text is squish into the image because the image is squish into the mobile width. 在宽度非常小的iPhone或其他移动设备上，所有文本都被压缩到图像中，因为图像被压缩到移动宽度中。

One way to fix that is to create separate mobile slider image where there is less text and it is easier to read on a mobile. 解决此问题的一种方法是在文本较少且在移动设备上更容易阅读的情况下创建单独的移动设备滑块图像。 You can use CSS Media Queries to trigger the mobile slider to show if the width is small. 您可以使用CSS Media Queries触发移动滑块以显示宽度是否较小。

As for your question about the slider, are you using Owl Carousel ( http://www.owlcarousel.owlgraphic.com/ )? 关于滑块的问题，您是否正在使用Owl Carousel（ http://www.owlcarousel.owlgraphic.com/ ）？ If you are, include the code you are using so we know how to troubleshoot. 如果您是，请包括您正在使用的代码，以便我们了解如何进行故障排除。

Thanks! 谢谢！

He is using owl carousel. 他正在使用猫头鹰传送带。 I see you are also using bootstrap. 我看到您也在使用引导程序。 Is there a reason you are not using the bootstrap carousel? 您不使用引导传送带是有原因的吗？ See here for reference 请参阅此处以供参考

You have the required files to use the linked solution. 您具有使用链接的解决方案所需的文件。