Question

我在荷兰有一家园林绿化公司并为它设计了一个网站，几个月前我上传了它，没有任何问题（当然我在上传之前在几台设备上测试过），但最近我收到了评论和邮件说网站的比例不合适，并且网站的某些部分（图片，文字等）覆盖了其他部分，例如联系信息，所以我立即开始查看代码并尝试弄清楚会发生什么我注意到，在我自己的电脑，手机和同事的其他设备上，一切看起来都不错，但显然屏幕上的屏幕比我的屏幕大，这就是问题发生的地方。

我已经查看了代码，并且无法找到任何可能出现问题的内容，我已经在谷歌洞察等几个地方进行了测试，而且一切似乎都很好，但它仍然无法正常工作更大的屏幕。

我想问一下有空闲时间的人是否可以在网站上访问，如果有人遇到同样的问题，请给我建议它可能是什么，我真的没有想法，而且我认为我失去了可能的客户。

我的网站是www.vossenatuurlijketuinen.nl，完全以html和CSS设计。

如果有人可以提供帮助我会非常感激，我将继续努力解决它，如果我找不到解决方案，也许我将不得不雇用某人来研究它，尽管我宁愿继续自己做...

编辑：我已经扫描了整个代码，但仍然无法找到导致问题的原因，我考虑使用w3.css作为下面的@ mike510a消化。我注意到的唯一一件事，我认为可能需要对此做些什么，虽然我真的不知道为什么这会是一个问题，是我在所有html文件的头部都有这个：

＆＃13;

<meta name="viewport" content="width=1264px, initial-scale=1, maximum-scale=1">

＆＃13;

这是在打开身体之后：

＆＃13;

<div style="min-width: 1264px; margin: 0 auto;">

＆＃13;

我认为它可能会在大于1264像素的显示器上变得不合适，但是将数字更改为更高的数字只会使页面在较小的屏幕上看起来更大......

编辑2：我最终将这个媒体查询添加到css，这解决了chrome的问题，但在IE上它并没有改变一件事......

＆＃13;

@media only screen and (min-width: 1364px) {
	body {zoom:150%;}
}

＆＃13;

Answer 1

您的解决方案可能是使用 w3.css 而不是您当前的CSS

注意内容如何与页面完全匹配，即使您点击全屏也是如此。

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


<div class="w3-container w3-teal w3-card-2">
  <h1>My Car</h1>
</div>

<img src="https://www.w3schools.com/w3css/img_car.jpg" alt="Car" style="width:100%">

<div class="w3-container">
  <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>

<div class="w3-container w3-teal">
  <p>My footer information</p>
</div>

为什么我的网站不能在更大的屏幕上工作

1 个答案: