- 締切済み
ホムペ作成・スマホ・モバイル・PC切り替え
ホームページを自作で作成し、完成したのですが 現在、スマホとPCのきりかえするボタンを こちらのタグにて設定しました。 <script type="text/javascript"> // iPhoneまたは、Androidの場合は振り分けを判断 if (document.referrer.indexOf('本サイトのアドレス') == -1 && ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)) { if(confirm('スマートフォン用サイトを表示しますか？')) { location.href = '携帯サイトのアドレス'; } } </script> しかし、ガラケーで見ると、PC版、スマホ版、どちらもデザインが崩れていて見にくい状態です。 それにこのジャバスプリクトはガラケーでは表示されません。 そこで詳しい方に質問なのですが、ガラケーで、わたしのホームページにアクセスした場合 アメブロに飛ぶように設定などできませんか？ またこのような「スマートフォン用サイトを表示しますか？」というようなコメントも出すことは可能でしょうか？
- hello9o9
- お礼率29% (9/31)
- ホームページ作成ソフト
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞ホームページを自作で作成し、完成したのですが 残念ですが、最初の最初から間違えられてしまった。 現状ではfirefoxなど他の標準ブラウザとの表示差もあるのじゃないかと。 ホームページを作ろうとしたら、まず最初に仕様書を読まれたと思いますが、肝心なところを読み飛ばされた？？ 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 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 )］より 「どんな環境からもWebの情報を利用できる」ただ、そのために、わざわざHTMLを使ってウェブページを作るのですよ。ホームページビルダーなどのツールを使うとこの互換性で行き詰ってしまいます。→ ホームページ・ビルダー - Wikipedia( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC#.E4.BD.9C.E6.88.90.E3.81.97.E3.81.9F.E3.82.A6.E3.82.A7.E3.83.96.E3.82.B5.E3.82.A4.E3.83.88.E3.81.AE.E5.BD.B1.E9.9F.BF ) 本来は、きちんと作成されていればPC、スマホは無論、携帯電話、プリンター、スクリーンリーダー、点字出力、そして検索エンジンにも対応したページができるはずです。そのためのHTMLですから。そうでなきゃPDFなどの他の方法がある。 とりあえず<body>の次に <p id="MessageForTTY"><a href="[携帯サイトのアドレス]">スマートフォン用サイトを表示しますか？</a></p> とでもかいて、<head></head>内に <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- p#MessageForTTY{display:none;} --> </style> を入れておけば、スタイルシートを解釈するブラウザは、この部分は消滅する。 ★HTMLはウェブ標準で作成すること、すなわち、HTML5を目前にした今日だと HTML4.01strict + CSS2.1 がベストでしょう。 ★DOCTYPEを、ブラウザが標準モードで動作するよう記述すること <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ★Another HTML-lint gateway( http://cetus.sakura.ne.jp/htmllint/htmllint.html ) Another HTML-lint gateway( http://cetus.sakura.ne.jp/htmllint/htmllint.html ) などで文法チェックて大きな減点は無いようにすること これで最低限、PCやスマホは対処できるはずです。 その上で ★リキッドでデザインすること floatは使わない width:100%;min-width:600px;max-width:1000px あたりでよいかと
補足
詳しく回答していただきありがとうございます。 やはり自作では難しいところがたくさんありますね。 独学とホームページビルダーでホームページをつくってしまったので 色々な不具合が出ています。 お答えいただいた部分は一度修正をかけてみようかとおもいますが 自分でだれからでもみやすいホームページをつくるのはやはり専門業者さんに委託するほうがいいのでしょうか(._.) 文法チェックでもたくさん チェックがはいり、くじけそうです。