スポンサードリンク

htmlはPC用のままで、iPhoneには専用のcssを適用する方法のメモ。

CSS3のメディアクエリを利用すると、iPhoneからのアクセスの場合に専用cssを適用することができるそうです。

<meta name="viewport" 
content="width=480,maximum-scale=0.6667 user-scalable=no " />

<!-- iPhone向け -->
<link rel="stylesheet" type="text/css" href="iphone.css" 
media="only screen and (max-device-width:480px)" />
<!-- PC向け -->
<link rel="stylesheet" type="text/css" href="pc.css" 
media="screen and (min-device-width:481px)" />
<!-- IE向け -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="pc.css" 
media="screen" />
<![endif]-->


h:2/f:2
iPhoneやAndroid向けのサイト作成テクニックを紹介した記事があったのでメモ。

ASCII.jp「実践!iPhone&Androidサイト制作ガイド

掲載内容は以下です。
第1回   スマートフォン対応サイトの作り方、教えます
第2回   作って学ぶスマートフォン対応サイトの基本
第3回   サイト制作の前に知りたいiPhone/Androidの仕様
第4回   スマートフォン対応サイトを設計するときのノウハウ
第5回   スマートフォンサイトをデザインする7つのポイント
第6回   実例でわかる!スマートフォンサイトの画面設計
第7回   HTML5/CSS3で作るスマートフォンサイトの基本
第8回   JavaScriptで振り分けてスマホサイト完成!

iPhoneやAndroid向けのスマートフォンサイト作成テクニックがたくさん掲載されています。
今後、必要になる機会は多そうなので勉強しないと・・・。

Android向けの作成方法のサイトはまだまだ少ないので助かりますね。


iPhoneでなぜか半角数字7桁、10桁、11桁のフォントカラーがきかないので、テスト。
1
12
123
1234
12345
123456
1234567
12345678
123456789
1234567890
12345678901
123456789012
1234567890123
12345678901234
123456789012345
1234567890123456
12345678901234567
123456789012345678
1234567890123456789
12345678901234567890

htmlの中に電話番号と思われる文字列を自動検出して、リンクを制御するみたい。
電話番号でなくても、クリックで電話がかかってしまう。

下記のmetaタグにより回避することが可能でした。
<meta name = "format-detection" content = "telephone=no" />


原因がわからずはまりました・・・
1

スポンサードリンク