我正在按照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>
如果可能还有其他相关文件,请告诉我。