【问题标题】:CSS background issue on mobile Safari移动 Safari 上的 CSS 背景问题
【发布时间】:2015-01-21 07:25:11
【问题描述】:

我正在尝试创建一个全屏 div,到目前为止,它在 chrome、firefox 和 safari 上都能完美运行,但在 ipad 和 iphone 上,背景图像和 div 的大小不成比例。 这是我目前所拥有的:

HTML

<div class="intro">
 (content)
</div>

CSS

.intro {
    width:100%;
    min-height: 100vh;
    margin: 0;
    background-image: url("../img/background.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     height: 100%; 

}

如何在移动 Safari 上解决此问题? 谢谢

【问题讨论】:

    标签: ios css iphone ipad safari


    【解决方案1】:

    我建议您使用媒体查询来操纵您网站的外观以适应不同的分辨率。如果是这种情况,还建议您在实际设备上测试您的网站,而不是在任何模拟器上测试。

    以下是有关如何使用媒体查询的链接: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    问候

    【讨论】:

    • 是的,我正在使用媒体查询,网站在不同的屏幕尺寸上看起来就像我希望的那样,但主要问题是在 iPad 和 iPhone 上的 Safari 浏览器上运行时出现
    【解决方案2】:
    【解决方案3】:

    正如上面提到的另一张海报,媒体查询是 RWD 的好习惯。桌面上的全屏网站看起来不错,但在移动设备上经常被夸大,即使是像 iPhone 6+ 这样的大型设备。可能需要在媒体查询中进行一些实验才能使其正确。

    还要注意移动设备上图像的文件大小——我最近帮助了一个需要帮助解决类似问题的网站。虽然移动端的显示最终看起来不错,但它只是缩小了用于桌面显示的相同图像,导致性能不佳(即使在 4G LTE 上)。这可能需要一些时间,但使用针对移动设备优化的图像集非常值得。

    【讨论】:

    • 我在加载时间方面遇到了一些问题,但到目前为止它运行良好。还有更具体的媒体查询吗?我仅根据屏幕宽度定义断点
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-11-23
    • 1970-01-01
    • 2020-12-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多