如何解决移动设备（Wordpress 主题）的“响应式设计模式”问题？

Posted 2023-02-19

【中文标题】如何解决移动设备（Wordpress 主题）的“响应式设计模式”问题？

【英文标题】：How can I fix "responsive-design mode" problems for mobile devices (Wordpress theme)?

【发布时间】：2013-09-09 20:25:50

【问题描述】：

我在“响应式设计模式”中使用 wordpress 主题。在 iPad 上查看网站呈现应有的方式（包括桌面，无响应），但在 iphone 上查看变得混乱。有人可以帮我弄清楚如何将 iPad 样式复制到 iPhone 和所有非桌面设备；并完全删除智能手机样式。我希望为所有移动设备（只是较小的版本）复制与 iPad 完全相同的布局。主题的作者告诉我查看“responsive-all.css”文件并修复那里的东西，但我遇到了麻烦，因为我不精通 css。这是css的链接。 responsive-all.css

非常感谢任何帮助。谢谢 迈克尔

【问题讨论】：

如果您的网站是 gearmx.com，那么我认为您的移动网站没有问题。它按预期工作正常。将您在平板电脑模式下看到的内容压缩到手机中确实是不现实的。它与现在不同的全部原因是因为它应该不同。你能给我们展示一些你认为“混乱”的图片吗？在我看来，没有什么是凌乱的，你只是不喜欢手机尺寸的样子，在这种情况下，你有点卡住了。

【参考方案1】：

将当前视口元标记替换为以下内容可能会使 iPhone（和大多数其他移动设备）看起来像 iPad：

<meta name="viewport" content="width=768">

【参考方案2】：

第一步：如果你想删除移动端的视图，只需在CSS文件的末尾添加注释或者删除，当然还有以下内容：

/*
* -------------------------------------------------------------------------------------------
* MOBILE BOTH VIEWS
* -------------------------------------------------------------------------------------------
*/    @media only screen and (max-width: 767px) 
...

第 2 步：然后更改条件，让平板电脑/智能手机获得相同的设计：

/*
* -------------------------------------------------------------------------------------------
* TABLET PORTRAIT 
* -------------------------------------------------------------------------------------------
*/   @media only screen and (max-width: 979px) 

之后，我不知道你到底想在这个手机/平板电脑上看到什么。

【讨论】：

由于修复响应模式的复杂性，我选择使用“无响应”站点。然而，当会员登录网站时，用户无法通过 iPhone 或 iPad 点击菜单（菜单只是闪烁）......很奇怪。当会员未登录时，菜单完美运行。就好像标题中的“会员登录屏幕”有冲突。这就是我首先尝试使用响应式移动菜单的全部原因。如果有人知道可能导致这种情况的原因，请告诉我。谢谢。桌面版本完美运行。该网站是 www.alexhaleyacademy.com