iphone - 如何解决在 iPhone 版 Refinery CMS 中不起作用的媒体查询？

Question

我创建了我的 Rails 应用程序来响应。它在页脚有最明显的区别，菜单对手指较大的人更友好。

在 Firefox 中测试我的应用程序并减小宽度时，可以看到移动样式，如下所示：

但是当我在iOS模拟器中测试时，我得到了这个结果

我的第一个直觉是检查头部的视口元标记。

在 RefineryCMS 中，这似乎是默认设置：

<meta charset='<%= Rails.application.config.encoding %>' />
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><![endif]-->
<title><%= browser_title(yield(:title)) %></title>
<%= raw %(<meta name="description" content="#{@meta.meta_description}" />) if @meta.meta_description.present? -%>
<%= raw %(<link rel="canonical" content="#{@canonical}" />) if @canonical.present? -%>
<%= csrf_meta_tags if Refinery::Core.authenticity_token_on_frontend -%>
<%= yield :meta %>
<%= stylesheet_link_tag "application" %>
<%= yield :stylesheets %>
<%= render '/refinery/google_analytics' %>
<%= javascript_include_tag 'modernizr-min' %>

所以不在那儿，然后我将其添加到标题之前进行测试

<meta charset='<%= Rails.application.config.encoding %>' />
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><![endif]-->
<meta name="viewport" id="view" content="width=device-width minimum-scale=1, maximum-scale=1" />
<title><%= browser_title(yield(:title)) %></title>

这是我得到的结果

但是还有什么我需要注意的吗？

Answer 1

根据这篇博文

iPhone 上的默认视口宽度为 980px

并且无论项目是否响应，都鼓励使用视口。但是您被警告不要允许用户可扩展

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

本例中的问题通过添加

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

正如所讨论的。是的，问题主要限于 iPhone（在各种移动设备中），因为它的默认视口大小。