html - 网站横幅背景颜色

Question

我做了一个网站：www.co-ceramics.co.uk

很简单，但这是客户想要的。但是，如果我在我的 iPhone 上查看此内容。横幅的蓝色背景颜色无法正确显示（一直到右侧）。

也许我必须为 iphone 的分辨率设置一个特定的样式表？

或者还有比这更简单的东西吗？

谢谢！伊恩

Answer 1

这是因为你正在使用这个：

meta name="viewport" content="width=device-width, initial-scale=1.0"

宽度正是它应该做的，它获得屏幕尺寸并显示 100%，但是横幅内的元素超出了宽度，这就是它推出的原因。

Answer 2

这是一个检查是否移动/Iphone 的代码（JS 代码）。

if (screen.width <= 699) {
  // Check if mobile
 }



if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    // Check if Iphone
}

现在，当您可以确定用户是否使用移动设备时，您可以为您的 css 代码制作精简版，或者将宽度和高度更改为与您的背景可以使用的移动设备相同。

另一种方法是百分比而不是像素（宽度：600px <- 仅匹配少数屏幕，宽度：100% <- 匹配整个屏幕的所有屏幕）。

希望我有所帮助

编辑：

只是为了明确屏幕宽度部分，您可以使用document.write或替换样式表，innerHTML并使用改进的代码创建新的 css 文件。