iOS iPad平板电脑渲染视口不正确

iOS iPad tablet renders viewport incorrectly

本文关键字：视口 不正确 iPad 平板电脑 iOS      更新时间：2023-09-26

我有一个固定宽度的站点，确切地说是960px。我已经放大了所有的内容，以便在手机上工作。我可以使用固定宽度的视口，它工作得很好，但谷歌一直给我错误，我不应该使用<meta name="viewport" content="width=961">谷歌希望我使用<meta name=viewport content="width=device-width, initial-scale=1">或类似的非固定宽度，否则我的网站对谷歌来说不适合移动。当我按照谷歌对我的视口所说的操作时，网站会在纵向视图中从屏幕右侧滚动。需要帮助如何让谷歌想要的东西在iPad和ios上运行吗？

那些评论你的线程的人太傻了。如果你的元标签统计宽度是951，但设备上的宽度更大，那么这会让网站看起来很奇怪。这一切都取决于设备的宽度。如果你担心SEO，元标签与此无关。你的内容，你的特定SEO元标签（描述，名称，标题等）将有助于那里。

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

所以，这就是我的元标签在我设计或开发的所有网站上的外观。

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

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

您的所有代码都取决于您的CSS文件。所以，也许你的css文件是namestyle.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，你已经知道我要去哪里了。基本上，我设计了一个适用于平板电脑、手机和台式机的标志。我通常在选项卡和桌面上使用相同的徽标，但这完全取决于情况。

祝你好运。

相关文章：