为什么 background-size:cover 在移动设备上的作用不同？

Question

我遇到了背景尺寸问题：移动设备上的封面（在移动 safari 和 android 上测试）。

当用户展开更多信息框时，我的网页高度有时会发生变化。每当在移动设备上发生这种情况时，背景图像实际上会放大。在桌面上则不会。

我通过在 CSS 中添加“可滚动”层来解决此问题，但这会带来更多问题。

关于如何解决这个问题的任何建议，或者“可滚动”层是我唯一的选择吗？

我相信移动浏览器只是将背景调整为网站最初以“扩展”大小加载时的样子，但是，在桌面上它不会这样做。

Answer 1

使用响应式设计可能会帮助您摆脱这些问题，该方法适用于为桌面和移动设备创建网站的开发人员。

我举个例子：

在你的 CSS 中你有：

@media screen and (max-width: 700px) {
.hide {
    display:none;
}}

在你的 PHP/HTML 中

<p class="hide"> tester 1234 </p>

这些会让你在屏幕尺寸大于 700 像素时显示你的文字，如果小于 700 像素就会消失。

我想你现在应该可以为你的代码做一些修改了，希望对你有所帮助。

参考：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp