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

締切り済みの質問

ホムペ作成・スマホ・モバイル・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版、スマホ版、どちらもデザインが崩れていて見にくい状態です。

それにこのジャバスプリクトはガラケーでは表示されません。

そこで詳しい方に質問なのですが、ガラケーで、わたしのホームページにアクセスした場合
アメブロに飛ぶように設定などできませんか?
またこのような「スマートフォン用サイトを表示しますか?」というようなコメントも出すことは可能でしょうか?

投稿日時 - 2014-02-09 16:28:13

QNo.8468073

困ってます

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

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

回答(2)

ANo.2

こちらをどうぞ。
http://okwave.jp/qa/q8464411.htm
http://okwave.jp/qa/q8464411.html

投稿日時 - 2014-02-11 17:43:53

ANo.1

>ホームページを自作で作成し、完成したのですが
 残念ですが、最初の最初から間違えられてしまった。
 現状では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
 あたりでよいかと

投稿日時 - 2014-02-10 10:58:36

補足

詳しく回答していただきありがとうございます。

やはり自作では難しいところがたくさんありますね。
独学とホームページビルダーでホームページをつくってしまったので 色々な不具合が出ています。

お答えいただいた部分は一度修正をかけてみようかとおもいますが
自分でだれからでもみやすいホームページをつくるのはやはり専門業者さんに委託するほうがいいのでしょうか(._.)

文法チェックでもたくさん チェックがはいり、くじけそうです。

投稿日時 - 2014-02-24 10:54:57

あなたにオススメの質問