jQuery Mobile应用程序显示的是显示器尺寸而不是电话屏幕尺寸

我正在通过遵循Railscast#199而不是jQTouch的JQuery Mobile来调整我的博客应用程序。jQuery Mobile应用程序显示的是显示器尺寸而不是电话屏幕尺寸

在我的显示器上，我的应用程序看起来很好，但宽泛地说明了与手机相比笔记本电脑屏幕的比例较宽的尺寸。如果我将浏览器窗口调整到我笔记本电脑屏幕宽度的三分之一，这是我期望通过手机（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>

请让我知道，如果有可能有其他相关文件。

来源

2012-12-24 umezo

尝试添加viewport元到head application.mobile.erb

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

来源

2012-12-24 13:00:15 dimuch

甜的部分！我知道这很简单！ Thansk @dimuch。 – umezo

jQuery Mobile应用程序显示的是显示器尺寸而不是电话屏幕尺寸

回答

相关问题