网站横幅背景颜色

Question

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

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

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

还是有比这简单得多的东西吗？

谢谢！ 伊恩

Answer 1

这是一个代码，用于检查是否为mobile / Iphone（JS Code）。

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



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

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

其他方式是百分比而不是像素（宽度：600px < - 仅匹配几个屏幕，宽度：100％＆lt; - 匹配屏幕上的所有屏幕）。

希望我帮助

编辑：

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

Answer 2

因为你正在使用它：

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

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