我的背景在手机和平​​板电脑上看起来不对，该怎么办？

Posted 2023-03-12

【中文标题】我的背景在手机和平​​板电脑上看起来不对，该怎么办？

【英文标题】：My backgrounds looks wrong on mobile and tablet, what to do?

【发布时间】：2014-08-15 08:30:47

【问题描述】：

当我测试时，我的 Ipad 和 Iphone 上的背景看起来完全错误。 我在***上搜索了我的问题，但没有运气！ 我知道“背景尺寸：封面”是问题所在，但我不知道如何解决。

#home, #music, #videos, #tourplan, #facebook, #profile, #downloads 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

#home, #videos, #downloads 
    height: 100vh;

#music, #tourplan, #facebook, #profile 
    min-height: 100vh;
    height:auto;    

【问题讨论】：

试试brackground-size: 100% 100%;

可能是您的 vh 单位 - ios 报告错误行为 - caniuse.com/viewport-units

没错，Pete，有什么解决方案的建议吗？

您可以尝试使用 CSS 媒体查询“破解”它

顺便i.imgur.com/GrdT0qL.png???

【参考方案1】：

我同意“背景尺寸：封面”由于宽度小而在 Ipad 和 Iphone 中无法正常工作。所以，如果你有问题，你可以为 Ipad 和 Iphone 使用任何背景颜色（根据你的选择）。

/* Ipad Layout: 480px. */

@media only screen and (min-width:480px) and (max-width: 767px) 
    #home, #music, #videos, #tourplan, #facebook, #profile, #downloads 
    background: #ddd; /* Just as an example */
    


/* Iphone Layout: 360px. */

@media only screen and (min-width: 360px) and (max-width: 479px) 
    #home, #music, #videos, #tourplan, #facebook, #profile, #downloads 
    background: #ddd; /* Just as an example */
       

如果你喜欢使用不同的背景颜色而不是不同的背景图片，你可以使用这个代码：

#home 
          background: #ddd; /* Just as an example */

#music 
       background: #eee; /* Just as an example */

#videos 
        background: #fff; /* Just as an example */

#tourplan 
          background: #000; /* Just as an example */

#facebook 
          background: #00ff00; /* Just as an example */

#profile 
         background: #ff0000; /* Just as an example */

#downloads 
           background: #0000ff; /* Just as an example */

在这种情况下，您需要将此代码放入您的特定 CSS 媒体查询区域，例如 .您需要更改文本颜色等元素颜色。要查看这样的网站，请访问此链接：http://www.ollo.com.br/m/

保持良好状态。