- 締切済み
ホムペ作成・スマホ・モバイル・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/2281)
- 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 あたりでよいかと
関連するQ&A
- ＰＣ用のサイトとスマートフォン用のサイトの振り分け
以前、このサイトで検索して、トップページは <script type="text/javascript"> if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { location.href = '/i/'; } </script> でできました。 ですが、最近、スマートフォンを新しくしたら、トップページが表示されなくなってしまいました。 どうしてでしょう？ あと、トップページ以外のページはどのように振り分けをすればよいのでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- javascriptでスマートフォン・PC分岐
ＰＣ用のサイトとスマートフォン用のサイトをそれぞれ作り、アクセスをjavascriptで振り分けたいと考えています。 ＰＣ用とスマートフォン用のＵＲＬはあいだに"i"をはさむ違いだけです。 http://www.hoge/cate1/post_001.html http://www.hoge/i/cate1/post_001.html いろいろ調べた結果、トップページは下記でうまく行きました。 <script type="text/javascript"> if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { location.href = '/i/'; } </script> 問題は個別ページがうまく行きません。自分なりに調べて下記のように書きました。 <script type="text/javascript"> if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { location.href = '/i/location.pathname'; } </script> ところがこれではhttp://www.hoge/i/location.pathnameに行ってしまいダメです。 なぜダメなのでしょうか？ この場合、どのように記述すれば良いか教えてください。 ＰＨＰとＣＧＩとかはさっぱり判らないのでその選択肢はありません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- userAgent
userAgentでプラットフォーム別に表示するサイトを分岐する場合 <script type="text/javascript"> <!-- var is_iphone=navigator.userAgent.indexOf("iPhone", 0); var is_ipod=navigator.userAgent.indexOf("iPod", 0); var is_android=navigator.userAgent.indexOf("Android", 0); if((is_iphone & is_ipod) > -1){ window.location = "sp/"; }else{} if(is_android > -1){ window.location = "sp/"; }else{} // --> としたら、ガラケーやipodではないタブレットは、どれと認識されるのでしょうか？ タブレットはAndroidになるのでしょうか？
- 締切済み
- HTML
- UAによるリダイレクト
スマートフォンからのアクセスを他のページに飛ばすために どうにか方法がないかと思って、いろいろ調べて勉強しております。 そこで以下のような記述でできることが分かったのですが、 javascriptなどについて詳しくないため、-1や0の意味が分かりません。 -1、0はどういう意味なのでしょうか？ <script type="text/javascript"> if (document.referrer.indexOf('muay-thai-pck.com') == -1 && ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)) { location.href = 'url'; } </script>
- ベストアンサー
- JavaScript
- ホームページ スマートフォン PC 振り分け
初質問でつたない文章ですが、ご回答のほどよろしくお願い致します。 【質問】 スマホからスマホ版ページに飛び、PC版へのリンクを押した場合はPC版を閲覧出来るという設定はjavascript利用で行えないでしょうか？ そんなめんどくさい事をするならhtaccessを利用した方がいいのでしょうか？ htaccessでもそういった設定は難しいのでしょうか？ 【現状】 PC版とスマホ版のウェブサイトを作り、htmlを書き足してjavascriptで振り分ける方法にしました。振り分けは問題なくできています。 【問題点】 スマホ版ページに「PC版」と文字を書いて、スマホでPC版を見たい人が飛べるようリンクを貼ったのですが、当然の事ながらスマホはスマホとして認識されるので、上記のhtml記述ではPC版に飛べません。 スマホでスマホ版ページの「PC版」という文字を押しても今居るスマホ版ページに飛ぶだけで、ひたすらループするのみです。 ーーーーーーーーーー関連個所ーーーーーーーーーー <script type="text/javascript"> if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { location.href = 'sp'; } </script> ーーーーーーーーーーーーーーーーーーーーーーーー 拙い文章失礼しました。 よろしくお願いします！！
- 締切済み
- JavaScript
- ホームページビルダー19
お世話になっております。 ホームページビルダー19でサイトを運営しているのですが、トップページのソースを見ると、下記の記述があります。これは自動で記述されるものなのでしょうか？どのように、ホームページビルダーのソフトで設定すれば、以後、この記述を削除できるのでしょうか？よろしくお願いいたします。 <!--HPB_SCRIPT_UAREDIRECT if(document.referrer.indexOf(document.location.hostname)==-1){ if (navigator.userAgent.indexOf('iPhone') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) {location.href = 'sp/index.html';}}//-->
- 締切済み
- ホームページ作成ソフト
- jQueryで画像置換が上手くいきません
PCサイトをスマホで読み込んだ場合に、特定の画像を小さいサイズに置換して表示したいのですが、色々調べたところ、jQueryで画像置換ができるというサンプルがあったので用いたのですが、上手くいきません。 都合上、スマホ専用サイトを作成するという方針ではありません。 よって、所どころ画像置換する必要があり、どうしても実現させたいのです。 サンプルスクリプトは以下の通りです。 if文は他のスクリプトでも使用しており動いているので、合っていると思っています。 何がいけないのでしょうか？ -------------------------------------------------------------------- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>画像置換</title> <script src="js/jquery.js"></script> <script> if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { $('h1>img').attr('src', 'images/aaa.jpg').attr('width', '320').attr('height', '50'); } </script> </head> <body> <header> <h1><a href="index.html"><img src="images/bbb.gif" width="700" height="100" alt="hoge" /></a></h1> <header> </body> </html> -------------------------------------------------------------------- ちなみに、構文エラーは出ません。 サンプルスクリプトの出所は http://ascii.jp/elem/000/000/561/561127/index-3.html で、スクリプトの内容は以下の通りでした。 if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)) { $('h1>img').attr('src', '_images/ttl_main_mini.png').attr('width', '665').attr('height', '217'); } おわかりになる方、ぜひアドバイスください。お願いします。
- ベストアンサー
- JavaScript
- スマホとPCの表示をクリックで切り替える方法
初心者でスマホ対応に困っております。 同一ページ（ワンソース）で対応できるようにしようと javascriptのuserAgent（※以下参照）でPC用とスマホ用の 表示CSSが切り替わるページを作成しています。 スマホサイトのフッターによくある「PC」へのリンクをクリックすると スマートフォンでもPC用のスタイルが適用されるようにしたいと思っております。 また、PC用CSSからスマホ用CSSへ戻るリンクも設置したいと思っております。 環境は「.htaccess」と「php」が利用できないサーバです。 できればウィンドウサイズで表示が切り替わるのではなく、 リンクをクリックするだけで PC用とスマホ用のCSSを切り替えたいと思っております。 色々と探してみたのですが、なかなか思うソースが見つからなかったので、 実現可能かどうかも踏まえてご教授いただけますと幸いです。 以下、こんな感じでCSSを切り替えております。 if (navigator.userAgent.indexOf('iPhone') != -1) { document.write('<meta name="viewport" content="width=device-width, maximum-scale=1.0" />'); document.write('<link rel="stylesheet" href="css/smp.css" media="only screen and (max-device-width: 480px)" />'); } else if (navigator.userAgent.indexOf('iPad') != -1) { document.write('<link rel="stylesheet" href="css/iPad.css" />'); } else if (navigator.userAgent.indexOf('Android') != -1) { document.write('<meta name="viewport" content="width=device-width, maximum-scale=1.0" />'); document.write('<link rel="stylesheet" href="css/smp.css" media="only screen and (max-device-width: 480px)" />'); }; どうぞよろしくお願い申し上げます。
- 締切済み
- CSS
- スマートフォンサイトへのリダイレクト
javascriptでスマートフォンサイトへのリダイレクトを行いたいです。 こちらを参考にしましたが、うまく動作しません。 参考サイト http://helog.jp/hp/smartphone/1095/ ---------------------------------------------------------------- <script type="text/javascript"> var agent = navigator.userAgent; if(agent.indexOf('Linux; U; Android ') != -1 || agent.indexOf('iPhone; U') != -1 || agent.indexOf('iPad; U') != -1){ location.href = '/smartphone/'; } </script> ---------------------------------------------------------------- ちなみに私のサイト構成は以下のとおりです。 index.html←ここのheadに上記javascriptを書きました。 smartphone/index.html←上のindexにアクセスされたときに、ここに飛ばせたい。 詳しい方がいましたらよろしくお願いします。
- 締切済み
- JavaScript
- スマホ用ページへの振り分け
今、スマートフォン用のホームページを作っています。 PC用ページからスマートフォン用のホームページへ飛ばす方法を質問させてください。 現在、ページにJavascriptを埋め込み、UserAgentで判断してiPhone、iPod、Androidの場合は、 スマートフォン用のページに自動で飛ばす仕組みを作っています。 この作り方だと問題がありまして、 例えば、Android4.0の標準ブラウザやAndroid用Google Chromeでは 「デスクトップ版を表示」や、「PC版サイトのリクエスト」というのがあります。 スマホでYahoo!やAmazonのスマホ用ページを表示した後、ブラウザでこのチェックを付けるとPC版のページを表示します。 自分の作ったページでは、UserAgentで判断してページ自体を違うページに移動してしまっているので、 「デスクトップ版を表示」にチェックしてもPC版ページを表示しません。当然です。 質問ですが、 １．Yahoo!やAmazonのページは、どういう仕組みで、PC用とスマホ用ページを振り分けているのでしょうか？ ２．ブラウザの「デスクトップ版を表示」のチェックがやっていることは、 UserAgentを偽装してPC用のUserAgentを吐き出しているだけ、という理解は正しいですか？ 以上、宜しくお願いします。
- ベストアンサー
- HTML
補足
詳しく回答していただきありがとうございます。 やはり自作では難しいところがたくさんありますね。 独学とホームページビルダーでホームページをつくってしまったので 色々な不具合が出ています。 お答えいただいた部分は一度修正をかけてみようかとおもいますが 自分でだれからでもみやすいホームページをつくるのはやはり専門業者さんに委託するほうがいいのでしょうか(._.) 文法チェックでもたくさん チェックがはいり、くじけそうです。