- 締切済み
PCのHPサイトから自動でスマホに対応について
初心者なんですが、ホームページを作っている途中です。 パソコンで見る様にデザインしてるのでスマートフォンで見ると見にくくて困っています。 そこで、スマートフォンに自動切り替えのタグを使い、別ページを作ることにしました。 タグで以下のようなものを使用しています。 ただ、相手に選択できるようになってますので、選択なしの強制で変換させる方法はありますでしょうか。 ぜひ知ってる方がいたらよろしくお願いします。 <div class="Mobirth_Delete"> <script type="text/javascript"> function windowAddEventListener(callback) { if (window.addEventListener) { window.addEventListener('load', callback, false); } else if (document.attachEvent) { window.attachEvent('onload', callback); } } windowAddEventListener(function() { var agent = navigator.userAgent; if (agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Mobile/) != -1 || agent.search(/Android/) != -1) { if(confirm('スマートフォン用のサイト表示しますか?\n(キャンセルの場合はPCサイトを表示します。)')) { location.href = '●●●●' + location.pathname; } } }); </script> </div>
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
>選択なしの強制で変換させる方法はありますでしょうか。 高解像度のスマホだとPC用で良い人もいるでしょうし、そもそも今後登場するであろうすべてのスマホに対処し続けられますか? >パソコンで見る様にデザインしてるのでスマートフォンで見ると見にくくて困っています。 そもそも、この時点で大きな問題があるのでしないですか? わざわざ、PDFじゃなく、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 )]より HTMLを利用する環境は、screenメディアであるPCやスマホだけじゃありません。携帯電話での利用や印刷して利用する人、目の悪い人は文字を大きくして利用するかもしれませんし、スクリーンリーダーや点字出力を利用するかもしれません。★そもそも検索エンジンの訪問も考えなければなりません。 そのためにHTMLを利用してウェブページを作成するのです。 ★その原点を忘れてませんか? 1) 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) まず率直に文書構造だけをHTMLでマークアップします。 (注)ブラウザ間の誤差を極力排除するために、strictで作成し、DOCTYPEはブラウザが標準モードで動作するように記述します。 2) その文書構造を元にスタイルシートでプレゼンテーションを指定していきますが、スマホを含め様々なディスプレイを対称にする場合はリキッドでデザインしていきます。 まったくスタイルシートを書かない状態だとブラウザのもつデフォルト(初期)のスタイルはリキッドです。それをわざわざ、端末の制約の多い固定サイズにしてしまうことが、いわば諸悪の根源なのです。 例えば、width:100%;max-width:1000px;margin:0 auto;(min-width640px;)とするだけでよいはずです。 3) そのうえで、スマホに対してmediaqueryでデザインを変更する。 これで、すべての問題は解決するはずじゃないかと
- ONEONE
- ベストアンサー率48% (279/575)
if(confirm('スマートフォン用のサイト表示しますか?\n(キャンセルの場合はPCサイトを表示します。)')) { location.href = '●●●●' + location.pathname; } を location.href = '●●●●' + location.pathname; とします。