Adding mobile-friendly CSS

swaroopch · Jul 31, 2011 · 93aac01 · 93aac01
1 parent bfa2294
commit 93aac01
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,16 +1,18 @@
 <!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
 
   <title>isbn.net.in: <%= yield(:title) %></title>
 
-  <meta name="description" content="<%= yield(:description) %>">
-  <meta name="author" content="<%= yield(:author) %>">
+  <meta name="description" content="<%= yield(:description) %>" />
+  <meta name="author" content="<%= yield(:author) %>" />
 
   <!-- CSS -->
   <%= stylesheet_link_tag "main", "960", "rupee", "site", :cache => true %>
+  <%= stylesheet_link_tag "mobile", :media => "only screen and (max-device-width: 480px)" %>
   <style>
     <%= yield(:css) %>
   </style>

diff --git a/public/stylesheets/mobile.css b/public/stylesheets/mobile.css
@@ -0,0 +1,12 @@
+body {
+  width: 320px;
+  font: 12pt Helvetica, sans-serif;
+}
+
+header, footer {
+  width: 100%;
+}
+
+img, table {
+  max-width: 320px;
+}