

htaccessでスマートフォンからのアクセスを振り分けて、スマホサイトに転送するようにしています。
スマホサイトには「PC画面を表示」ボタンでPCサイトを見ることができるようにしています。
この時スマホサイトに設置した「PC画面を表示」ボタンはパラメータ(?mode=pc)付きでリンクさせたのですが、PCサイトのHTMLのみが表示され、cssが反映されません。(画像ファイルの画像などは表示されます)
色々な端末・ブラウザで試してみたところ、Androidスマホ(Android,chrome)やPC(IE,FireFox)などほとんどの場合上記の通りHTMLしか表示されません。
そのHTMLしか表示されていないPCサイトページを再読み込みすると正しく表示されます。
なぜかiphone(safari)は最初からPC画面が正しく(CSSを読み込んで)表示されます。
色々と調べたり試してみたのですが、解決策がわからず困っております。
初心者につき、なるべく分かりやすくご教授頂ければ幸いです。
よろしくお願い致します。
【.htaccessの内容】
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{HTTP_USER_AGENT} !iPad [NC]
RewriteCond %{REQUEST_URI} !/sp [NC]
RewriteCond %{QUERY_STRING} !mode=pc [NC]
RewriteRule ^$ /sp/ [R,L]
</IfModule>
【スマホサイトに書いたPCサイトへのリンク】
<a href="http://○○○○○.com/?mode=pc" >
何かのサイトで見て下記のようにしてみてもダメでした。
<a onclick='document.cookie="mode=pc;path=/;";' href="http://○○○○○.com/?mode=pc" >
【ディレクトリ】
下記が同一階層にあります。
・PC用のhtmlファイル
・CSSフォルダ
・SPフォルダ(中にindex.htmlなど他ファイル)
・.htaccess
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
せっかくスタイルシートを使うのに、PC用とスマホ用を作るのは、典型的な誤った方法ですよ。
スタイルシートを使用する最大の目的は!!
・構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
ここも
【引用】____________ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
・・・【中略】・・・
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
・メディア依存のカスケード( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
フィーチャホン、ガラケー、いわゆる携帯電話用に、media="handheld,tty"、印刷用にmedia="print"、読み上げようにmedia="speech" とかを用意して、スタイルシートだけ異なる物を読み込ませます。
ただ、HTMLから見るとPC用もスマホ用も、サイズ以外はまったく同じ
media="screen"
なのですから・・
CSS3で拡張されたmediaqueryを使うとスマホのサイズ--縦にしたとき、横にしたときも含めて自在にデザインできるのですから・・
⇒CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き( http://webdesignrecipes.com/web-design-for-mobil … )
⇒ウェブサイトをスマートフォン対応するために必要な5つの事 | コノルブログ( http://conol.co.jp/blog/archives/837 )
⇒ウェブサイトをスマートフォン対応するために必要な5つの事 | コノルブログ( http://conol.co.jp/blog/archives/837 )
★基本はたった一つのHTMLを作成して、PC用、携帯用、必要なら印刷機用とスタイルシートだけを切り替える。
・・・数年前--スマホが登場してブームになった頃に、スマホ用や携帯用に別々のページを作成する誤った方法が流行したことがありますが、Googleなどが「SEO的にも極めてまずい」と警告し始めて今はほとんどないはずです。
その上で・・・とりあえずの対処法ですが
1) スタイルシートへのパスが絶対配置になっているか?
示されたディレクトリ構成では、同じPATHだと異なるディレクトリを示すと思います。
スタイルシートへのパスはルートから始まる絶対パスだと、HTMLがどこにあっても利用できます。
<link rel="stylesheet" type="text/css" media="screen" href="/styleSheet/standard.css">
<link rel="styleSheet" type="text/css" media="handheld,tty" href="/styleSheet/keitai.css">
<link rel="styleSheet" type="text/css" media="print" href="/styleSheet/print.css">
とか・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Android(アンドロイド) Aloha Browser でダウンロードしたファイルをPCに転送するには? 1 2022/05/23 18:54
- その他(ブラウザ) IE・edgeで日増しに観られるサイトが減ってくる。 1 2022/10/04 22:40
- その他(ブラウザ) bingチャットの内容(縦長)をスクリーンショットで保存する方法 3 2023/02/28 02:13
- ドメイン・サーバー・クラウドサービス 自作サイトをサーバーにアップロードしたのですが… 2 2022/11/08 18:12
- その他(プログラミング・Web制作) .htaccessファイルの修正がこれで問題ないかどうか 1 2022/04/21 08:42
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 分数が正常に表示されない。 6 2022/05/09 18:53
- iPhone(アイフォーン) パソコンの音楽をスマホに取り込めません 7 2023/02/23 11:05
- マウス・キーボード Bluetoothのクイックペアリングについて 8 2023/03/25 16:50
- その他(IT・Webサービス) スマホサイトからの資料請求キャンペーン PCからの応募は無効でしょうか 2 2023/05/23 16:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページを作成し、インタ...
-
WEBサイトの画面サイズ表示につ...
-
デザイナーの方にWEBデザインを...
-
Web作成、ひとつのリンクボタン...
-
ブラウザ切り替え
-
HTMLからフォルダを開きたい
-
Excelで、社外秘(閲覧のみ)と...
-
特定のページを開いたとき、小...
-
リンク先からリンク元の、同じ...
-
iPadの標準ブラウザでローカルH...
-
perl/cgiについて、教えて下さい。
-
直リンクしたバナー
-
H1タグの色を変えたい。
-
VBAで#Regionに変わるものは無...
-
ユーキャンのCMに出てくる男優さん
-
Perlを使えるプロバイダを使っ...
-
aspで外部呼出しに対して画像を...
-
社内で利用するWebサイトを立ち...
-
VBA URLDownloadToFileについて
-
フレームで区切った時の隙間を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ホームページを作っているので...
-
ホームページ、iPadやiPhoneで...
-
スマホ向けサイトのつくりについて
-
画面は固定と可変のどちらがい...
-
サイトについての質問です。
-
ホームページの作成の進め方
-
スマホだけメニューが開く設定...
-
携帯HPナノ ナノという文字につ...
-
モバイルサイト作成
-
レスポンシブ 横1080px高解像度...
-
特定のページだけスマホに分岐...
-
IE9以下の場合は別ページを表示
-
どれくらいのブラウザに対応で...
-
HPサイトとスマホサイトの同時作成
-
HTMLは必ず使われてるので...
-
検索順位に詳しい方
-
ホームページ制作、SPサイトの...
-
自動でキーワードをリンクする...
-
iphone/android WEB制作について
-
携帯振り分け
おすすめ情報
ご回答ありがとうございます。
ご教授頂きました通りCSSのフォルダ名の前に/を付けて(/css/○○○.cssなど)絶対パスにしてみたのですが、やはりダメでした。
画像については相対パスのまま(images/○○○.jpgなど)で表示されています。
他に何かお気付きの点がございましたらまた教えて頂ければ幸いです。