iOS iPad 平板电脑不正确地呈现视口

Question

确切地说，我有一个 960 像素的固定宽度网站。我已经扩展了所有内容以在手机上工作。我可以使用固定宽度的视口，它工作得很好，但谷歌不断给我错误，我不应该使用 <meta name="viewport" content="width=961"> 谷歌希望我使用 <meta name=viewport content="width=device-width, initial-scale=1"> 或类似的非固定宽度，否则我的网站将不会被考虑对谷歌手机友好。当我按照谷歌对我的视口所说的操作时，网站会在纵向视图中从屏幕右侧滚动。需要有关如何在 iPad 和 ios 上实现 Google 想要的功能的帮助？

Answer 1

评论你帖子的人太傻了。如果您的元标记统计宽度为 951，但设备上的宽度更大，那么这将使网站看起来很奇怪。这一切都取决于该设备的宽度。如果您担心 SEO，元标记与此无关。您的内容、特定的 SEO 元标记（描述、名称、标题等）将对此有所帮助。

所以，我喜欢 Google。为什么？因为他们从不撒谎，他们所做的一切都令人惊叹。

所以，这就是我的元标记在我设计或开发的所有网站上的显示方式。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

为什么？因为真正的响应式网站需要这些。

您的所有代码都取决于您的 CSS 文件。因此，也许您的 css 文件名称为 style.css - 很棒。假设您在标题中插入了三个徽标。一种用于台式机，一种用于平板电脑，一种用于移动设备。太棒了！

<img src="../logoMobile.png" class="logo_mobile" />
<img src="../logoTab.png" class="logo_tab"/>
<img src="../logo.png" class="logo"/>

这将是我的 CSS

.logo_tab, .logo_mobile  {display:none;}

@media only screen and (max-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.logo_tab {display:block;}
.logo, .logo_mobile  {display:none;}
 }

@media only screen and (max-width: 767px), only screen and (max-device-width: 480px), only screen and (max-width: 767px) {
.logo_mobile {display:block;}
.logo, .logo_tab  {display:none;}
}

希望你能阅读 CSS 并且你已经知道我要去哪里了。基本上，我设计了一个适用于平板电脑、手机和台式机的标志。我通常在选项卡和桌面上使用相同的徽标，但这一切都取决于。

祝你好运。