Question

我正在调整我的移动博客应用程序，方法是Railscast#199，而不是JQuery Mobile，而不是jQTouch。

在我的显示器上，我的应用程序看起来很好，但是与手机相比，笔记本电脑屏幕的尺寸比例更宽。如果我将浏览器窗口调整到我的笔记本电脑屏幕宽度的三分之一左右，这看起来很完美，这是我期望在手机上看到的视图（iPhone 4S）。但是，当我在手机上查看该页面时，我的笔记本电脑屏幕上的缩小比例与之相同。为了澄清，这意味着标题非常薄，并且所有按钮和字体都很小。

我当然可以把一切都变得更大，但根据我所看到的资源，这似乎不是正确的做法。毕竟，标题在监视器上正确呈现但在手机上不正确是没有意义的。

导致此问题的原因是什么？似乎我可能以某种方式“强制”在页面上固定宽度，但我不确定这是怎么回事，因为我确实没有jQuery Mobile之外的任何CSS。任何输入/提示都将非常感激。

application.mobile.erb

<!DOCTYPE html>
<html>
<head>
<%= stylesheet_link_tag "mobile" %>
<%= javascript_include_tag "mobile" %>
<body>
  <div data-role="page">
    <%= render "layouts/header" %>
    <div>
      <% flash.each do |name, msg| %>
        <div class="alert alert-<%= name == :notice ? "success" : "error" %>">
          <a class="close" data-dismiss="alert">×</a>
          <%= msg %>
        </div>
      <% end %>
    </div>
    <div>
      <%= yield %>
      <%= link_to "Full Site", :mobile => 0 %>
      <%= render "layouts/footer" %>   
    </div>
  </div>
</body>

资产/ Javascript角/ mobile.css.scss

/*
 *= require_self
 *= require jquery.mobile-1.2.0.min.css
 */

资产/ Javascript角/ mobile.js

//= require jquery
//= require jquery.mobile-1.2.0.min.js

查看/布局/ _header.mobile.erb

<div data-role="header">
  <h1>Home</h1>
  <% if user_signed_in? %>
    <%= link_to "logout", destroy_user_session_path, :method => :delete %>
  <% else %>
    <%= link_to "login", new_user_registration_path %>
  <% end %>
</div>

如果有其他相关文件，请与我们联系。

Answer 1

尝试将viewport元添加到application.mobile.erb的head部分

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <%= stylesheet_link_tag "mobile" %>
  <%= javascript_include_tag "mobile" %>

jQuery Mobile应用程序显示监视器尺寸而不是手机屏幕尺寸

1 个答案: