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應用程序顯示的是顯示器尺寸而不是電話屏幕尺寸

回答

相關問題