0

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

在我的显示器上，我的应用程序看起来不错，但由于笔记本电脑屏幕的尺寸比手机的尺寸更宽，所以它的宽度很大。如果我将浏览器窗口调整到笔记本电脑屏幕宽度的三分之一左右，它看起来很完美，这是我希望在手机 (iPhone 4S) 上看到的视图。但是，当我在手机上查看页面时，我得到的比例与笔记本电脑屏幕上的相同。澄清一下，这意味着标题非常细，所有的按钮和字体都很小。

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

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

应用程序.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>

资产/javascripts/mobile.css.scss

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

资产/javascripts/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>

如果可能还有其他相关文件，请告诉我。

4

1 回答 1

1

尝试将viewport元添加到headapplication.mobile.erb 部分

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <%= stylesheet_link_tag "mobile" %>
  <%= javascript_include_tag "mobile" %>
于 2012-12-24T13:00:15.933 回答