Skip to content

Instantly share code, notes, and snippets.

@mumoshu

mumoshu/how-to-make-your-web-apps-viewable-to-smartphones.txt

Created May 21, 2010 08:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mumoshu/408627 to your computer and use it in GitHub Desktop.
Save mumoshu/408627 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
how-to-make-your-web-apps-viewable-to-smartphones.txt
1. HTMLのHEADタグ内に下記を記述（静的ページでも対応可能）
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
2. CSSを画面サイズによって切り替える
<!--[if !IE]>
<link rel="stylesheet" href="style_print.css" media="print" type="text/css" />
<link rel="stylesheet" href="style.css" media="screen and (min-device-width: 481px)" type="text/css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="style_mobile.css" />
<link rel="stylesheet" href="style_mobile.css" media="handheld" type="text/css" />
![endif]-->
<!--[if IE]>
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
<![endif]-->
3. ページ遷移や挙動を変える
サーバ側アプリでUAに"iPhone"や"Android"が含まれるかによって切り替え。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment