みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

.htaccessでスマートフォンを振り分けたい

.htaccessでスマートフォンを振り分けたいと思っています。

私が書いた.htaccessは

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone|BlackBerry) [NC]
RewriteRule ^/$ http://www.サイト名.com/smartphone/index-m.html/ [R,L]
</IfModule>

なのですが、iPhoneで試してみても元のPCのサイト(サイト名.com)に行ってしまいます。

でも、PCでインターネットエクスプローラを使うときのみスマートフォンのサイトに行くのです。
(サファリとグーグル・クロームは大丈夫です)

もう何がなんだかわかりません。。。

何かヒントでも結構ですので、お分かりになる方がいらっしゃいましたら、よろしくお願いいたします。

投稿日時 - 2012-01-01 23:11:46

QNo.7220243

すぐに回答ほしいです

質問者が選んだベストアンサー

.htaccess iphone 振り分け - Google 検索 ( http://www.google.co.jp/#sclient=psy-ab&hl=ja&safe=off&source=hp&q=.htaccess+iphone+%E6%8C%AF%E3%82%8A%E5%88%86%E3%81%91&pbx=1&oq=.htaccess+iphone&aq=1&aqi=g3g-C1&aql=&gs_sm=c&gs_upl=0l0l1l71l0l0l0l0l0l0l0l0ll0l0&bav=on.2,or.r_gc.r_pw.,cf.osb&fp=bb8efc42563bd6e3&biw=1018&bih=608 )

 の方法で試すしかありません。

 私はfirefox + User Agent Switcher ( https://addons.mozilla.org/ja/firefox/addon/user-agent-switcher/?src=search )

 やはりスタイルシートで表示を変えるのが本来の方法です。新しいキャリアが登場するたびに.htaccessを書き直さなきゃならない。本来HTMLは、
【引用】____________ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。
・・・【中略】・・・
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より

 i-phoeや携帯電話、あるいはiPad用にいちいちページを作って、内容が変わるとすべてのページを書き直さなきゃならない。
 スマートフォン独自に適用させるデザインにすれば良いのです。
14.4.1 メディア依存のカスケード ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.4.1 )
7.2 媒体依存型のスタイルシートを指定する ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/media.html )
iphone スタイルシート @media - Google 検索 ( http://www.google.co.jp/#hl=ja&safe=off&sa=X&ei=coYGT6jzAurQmAXa-eTWDw&sqi=2&ved=0CBgQBSgA&q=iphone+%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88+%40media&spell=1&bav=on.2,or.r_gc.r_pw.,cf.osb&fp=bb8efc42563bd6e3&biw=1018&bih=608 )

 iphone用のスタイルシートで、flashの部分やPC用のメニューをdisplay:noneとするか、HTML自体で<object-flashe用>
 <object-携帯用>
  <object テキスト>
 </object>
</object>

 とすべきだと思います。

 HTMLさえ、きちんと書かれていたら、そのほうが楽です。
[例]
<link href="pc.css" rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)">
<link href="iphone.css" rel="stylesheet" type= "text/css" media="only screen and (max-device-width: 480px)">
<!--[if IE]>
<link href="pc.css" rel="stylesheet" type="text/css" />
<![endif]-->

投稿日時 - 2012-01-06 14:31:59

お礼

サイトの作成がちょっと頓挫していてお礼が遅くなってスミマセン。。。

大変詳しい説明本当に感謝、感謝です!

投稿日時 - 2012-03-17 22:41:20

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

スマホとPCで振り分けるのであれば、CSSで振り分けるのがいいですよ。
編集するファイルもstyle.cssのみで済みますし、.htaccessが使えないサイトでも対応する上に、ウィンドウサイズによっても簡単に振り分けられるのでipadとiphoneの振り分けも可能です。以下参考記事。
http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/

投稿日時 - 2012-01-02 04:30:04

お礼

ありがとうございます。
これはいい方法ですね。
ですが、今回は元のPCのサイトにアイキャッチでスライドショーが入っているのとスマートフォン独自のサイトにしたいので、残念ながらこの方法を使うことは出来なそうな気がします。
次回サイト作成時には、是非参考にさせていただきたいと思います。
どうもありがとうございました。

投稿日時 - 2012-01-02 10:34:38

あなたにオススメの質問