Application jQuery Mobile affichant les dimensions du moniteur au lieu des dimensions de l'écran du téléphone

J'adapte mon application de blog pour mobile en suivant Railscast#199 mais avec JQuery Mobile au lieu de jQTouch.Application jQuery Mobile affichant les dimensions du moniteur au lieu des dimensions de l'écran du téléphone

Sur mon moniteur, mon application semble bien, mais est large pour tenir compte des dimensions proportionnellement plus larges d'un écran d'ordinateur portable par rapport à un téléphone. Il semble parfait si j'ajuste la fenêtre de mon navigateur à environ un tiers de la largeur de mon écran d'ordinateur portable, ce qui est la vue que je m'attendais à obtenir sur mon téléphone (iPhone 4S). Cependant, quand je regarde la page sur mon téléphone, j'obtiens les mêmes proportions non-rétrécies que sur mon écran d'ordinateur portable. Pour clarifier, cela signifie que l'en-tête est très mince, et que tous les boutons et polices sont minuscules.

Je pourrais bien sûr tout agrandir, mais selon les ressources que j'ai vues, cela ne semble pas être la bonne approche. Après tout, il n'est pas logique que l'en-tête soit correctement affiché sur un moniteur mais incorrectement sur un téléphone.

Qu'est-ce qui cause ce problème? Il semble que j'ai peut-être «forcé» une largeur fixe sur la page, mais je ne sais pas comment cela pourrait être, car je n'ai littéralement aucun css en dehors de jQuery Mobile. Toute contribution/conseils serait très appréciée.

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>

actifs/JavaScripts/mobile.css.scss

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

actifs/JavaScripts/mobile.js

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

vue/mise en page/_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>

S'il vous plaît laissez-moi savoir s'il peut y avoir d'autres dossiers pertinents.

Source

2012-12-24 umezo

Essayez d'ajouter viewport méta à head section de application.mobile.erb

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

Source

2012-12-24 13:00:15 dimuch

Sweet! Je savais que c'était quelque chose de facile! Thansk @dimuch. – umezo

Application jQuery Mobile affichant les dimensions du moniteur au lieu des dimensions de l'écran du téléphone

Répondre

Questions connexes