Ruby on rails jQuery移动应用程序显示显示器尺寸而不是手机屏幕尺寸_Ruby On Rails_Jquery Mobile

Ruby on rails jQuery移动应用程序显示显示器尺寸而不是手机屏幕尺寸

ruby-on-rails jquery-mobile

Ruby on rails jQuery移动应用程序显示显示器尺寸而不是手机屏幕尺寸,ruby-on-rails,jquery-mobile,Ruby On Rails,Jquery Mobile,我正在通过跟随而不是jQTouch来调整我的移动博客应用程序在我的显示器上，我的应用程序看起来不错，但相对于手机而言，笔记本电脑屏幕的尺寸要大得多。如果我将浏览器窗口的宽度调整到笔记本电脑屏幕宽度的三分之一左右，这看起来就完美了，这也是我在手机（iPhone4S）上所期望看到的。然而，当我在手机上查看页面时，我得到了与笔记本电脑屏幕相同的非缩小比例。澄清一下，这意味着页眉很薄，所有的按钮和字体都很小我当然可以把所有的东西都做大，但是根据我所看到的资源，这似乎不是正确的方法。毕竟，标题在显示器

我正在通过跟随而不是jQTouch来调整我的移动博客应用程序

在我的显示器上，我的应用程序看起来不错，但相对于手机而言，笔记本电脑屏幕的尺寸要大得多。如果我将浏览器窗口的宽度调整到笔记本电脑屏幕宽度的三分之一左右，这看起来就完美了，这也是我在手机（iPhone4S）上所期望看到的。然而，当我在手机上查看页面时，我得到了与笔记本电脑屏幕相同的非缩小比例。澄清一下，这意味着页眉很薄，所有的按钮和字体都很小

我当然可以把所有的东西都做大，但是根据我所看到的资源，这似乎不是正确的方法。毕竟，标题在显示器上正确呈现而在手机上错误呈现是没有意义的

是什么导致了这个问题？似乎不知何故，我在页面上“强制”了一个固定的宽度，但我不确定这是怎么回事，因为我在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>

<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>

assets/javascripts/mobile.js

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

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

查看/layouts/_header.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>

<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>


家
：删除%>

请告诉我是否有其他相关文件。

尝试将

视区

元添加到application.mobile.erb的

头部

部分

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

Sweet！我知道这很容易！坦斯克@dimuch。