• 締切済み

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>

  • HTML
  • 回答数2
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

>選択なしの強制で変換させる方法はありますでしょうか。  高解像度のスマホだと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)
回答No.1

if(confirm('スマートフォン用のサイト表示しますか?\n(キャンセルの場合はPCサイトを表示します。)')) { location.href = '●●●●' + location.pathname; } を location.href = '●●●●' + location.pathname; とします。

関連するQ&A

  • オブジェクトがありません

    オブジェクトがありませんとエラーが出てしまいます。 operaやNetscapeは動くようなのですがIEは動きません。 document.getElementById(target).style.top = y-offx+"px"; の部分でエラーがでるようなのですが。 出さないためにどうすれば良いかが、分かりません。 よろしくお願いします。 <html> <head> <title>ドラッグして移動する</title> <script type="text/javascript"><!-- if(window.addEventListener)window.addEventListener("load",loadScript,false); if(window.attachEvent)window.attachEvent("onload",loadScript); //関数ロード function loadScript(){ ///ドラッグ用ロード flag=false; Menu=new Array("menu1","menu2","menu3"); for(i=0;i<Menu.length;i++){ XMenu=window.document.getElementById(Menu[i]) if(XMenu.addEventListener)XMenu.addEventListener("mousedown",dragOn,false); if(XMenu.attachEvent)XMenu.attachEvent("onmousedown",dragOn); } } //ドラッグ関数 function dragOn(){ flag=true; target=this.id; ///移動 if(window.document.addEventListener)window.document.addEventListener("mousemove",dragMove,false); if(window.document.attachEvent)window.document.attachEvent("onmousemove",dragMove); ///終了 if(window.document.addEventListener)window.document.addEventListener("mouseup",dragOff,false); if(window.document.attachEvent)window.document.attachEvent("onmouseup",dragOff); } function dragMove(evt){ if (!flag) return; if (window.createPopup){ x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; }else{ x = evt.pageX; y = evt.pageY; } offx = 60; offy = 75; document.getElementById(target).style.top = y-offx+"px"; document.getElementById(target).style.left = x-offy+"px"; return false; } function dragOff(){flag=false;} // --></script></head> <body> <!-- 各メニューで自分自身をドラッグ開始するように,関数を呼ぶ --> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;" >メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;" >メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> <div id="menu4" style="background-color:yellow; position:absolute;top:200px; left:200px;width:120px;height:150px;">メニュー4</div> </body> </html>

  • スマフォサイト構築

    現在、スマートフォンサイトを構築しているのですが、 スマフォでPCサイトを閲覧したら強制的にスマフォサイトにとばすようにPCサイトの全ページに下記タグを埋めました。 -------------------------------------------- $(function(){ var agent = navigator.userAgent; if(agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){ location.href = 'sp'+location.pathname; } }); -------------------------------------------- ここまでは大丈夫なのですが、 スマフォサイトに設置してある「PCサイトへ」のボタンをおしたときに、PCサイトにとばすようにしたいです。(参考サイト:http://www.chikinramen.jp/) 普通にリンクでとばすと、また強制的にスマフォサイトに戻されてしまいます。 PHP、.htaccessは使用できないので、jsでの設置の仕方をご教授いただけたらと思います。 よろしくお願いいたします。

  • これはどういう意味でしょうか?

    <script type="text/javascript"> $(function(){ var agent = navigator.userAgent; var redirectPass = 'sp/'; if(agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){ location.href = redirectPass; } }); </script> これはどういう意味でしょうか? アイフォンとアイパッドとアンドロイドなら 違うページに移動させるよ という意味ですか?

  • ロールオーバーについて

    ロールオーバーをシンプルなjavascriptで実装するとの事でとあるサイトにて、以下のようなスクリプトがありました。 http://css-happylife.com/archives/2007/0621_0010.php ▼▼▼スクリプト▼▼▼ function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } ▲▲▲スクリプト▲▲▲ DOMを使ってimgのソースを 画像「_off.」から「_on.」に書き換えているんだなということまではわかるのですが、 if(document.getElementsByTagName) とか、 if(window.addEventListener) 等の記述があります。 ifのあとの()の中身は i>0 や (i>5)&&(i<=10) 等、演算子を用いた条件を記述するタイプした目にしたことがないのですが、 これはどういった事を表しているのでしょうか? ご教授お願いいたします。

  • event量産

    はじめまして! さっそくですが以下を <script type="text/javascript"> function $(e) { return document.getElementById(e); } function $$(n) { return $(n).childNodes[0].href; } function lh(u) { top.location.href = $$(u); } function addevent(node,evt,func){ if(node.addEventListener){ node.addEventListener(evt,func,false); } else if(node.attachEvent){ node.attachEvent("on"+evt,func); } } addevent( window,"load", function(){ //↓ここからが質問です addevent($("css_link"), "click", function(){ lh("css_link"); }); //↑これがうまくいったので var doo = "other_link"; addevent($(doo), "click", function(){ lh(doo); }); //↑次に向けてのテスト これもうまくいきました for(i=1;i<20;i++) { var names = "page"+i; addevent($(names), "click", function(){ lh(names); }); } //↑しかしこれがうまくいかない } ); </script> やっていることは<DIV>の中にある<A>のhref内容を読み取り、<DIV>と<A>の隙間をクリックしても同じURLにジャンプさせたいということです。 上記の"css_link"や"other_link"などの固定URLは羅列するつもりです。 これは問題なく動作します。 問題の ループさせている部分は"page1"~"page19"まで可変でPHPで書き出す部分です。 この部分の処理方法を教えてください。 もうひとつ質問です とりあえず19回ループさせていますが、ページ内に存在しないidを指定しても(実際はpage1,page2だけとか)現在はエラーにならないようですが、問題点などありましたら教えてください。 よろしくお願いします!

  • javascriptでスマートフォン・PC分岐

    PC用のサイトとスマートフォン用のサイトをそれぞれ作り、アクセスをjavascriptで振り分けたいと考えています。 PC用とスマートフォン用のURLはあいだに"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に行ってしまいダメです。 なぜダメなのでしょうか? この場合、どのように記述すれば良いか教えてください。 PHPとCGIとかはさっぱり判らないのでその選択肢はありません。 よろしくお願いします。

  • input要素の入力制限について

    <div id="pict"></div> <form action="post" id="f1"> <ul id="elementSize"> <li><label>縦<input type="text" name="height" value="500" />px</label></li> <li><label>横<input type="text" name="width" value="500" />px</label></li> </ul> </form> このような入力欄で、0~9以外の文字が入力された場合と、801以上の数字が入力された場合に、入力欄の後ろに「800以下の数字を入力してください」という文表示させ、800以下の数値が入力されたらこの文を消すようにしたいです。 function $(e){ return document.getElementById(e); } function WindowOnLoad(){ var heightStr = document.createTextNode("800以下の数字を半角で入力してください"); $("f1").height.onblur = function(){ if(this.value.match(/[^0-9]+/)||this.value>800){ $("elementSize").getElementsByTagName("li")[0].appendChild(heightStr); }else{ if($("elementSize").getElementsByTagName("li")[0].lastChild==heightStr){ $("elementSize").getElementsByTagName("li")[0].removeChild(heightStr); } $("pict").style.height = this.value + "px"; } } } if(window.addEventListener){ window.addEventListener("load", WindowOnLoad, false); }else{ window.attachEvent("onload", WindowOnLoad); }} if(window.addEventListener){ window.addEventListener("load", WindowOnLoad, false); }else{ window.attachEvent("onload", WindowOnLoad); } 今、上記のようなJavaScriptを書いて、実装は出来ているのですが、 もっとコードを短く出来ないかと思い質問させていただきました。 よろしくお願いします。

  • 【javascript】prototypeを使って宣言したfunctionでthis.の値が取れない

    以下HTMLは開いた時に'aaa'がアラートされるつもりで作りました。 ※行頭は全角スペースです。 <html> <head> <script type="text/javascript"><!-- function hoge(){  this.val ='aaa'; }; hoge.prototype.func = function(){  alert(this.val); }; h = new hoge(); if(window.addEventListener){  window.addEventListener('load', h.func, false); }else{  window.attachEvent('onload', h.func); } //--></script> </head> <body> </body> </html> 結果は、undifindがアラートされました。 alert(this.val); を alert(h.val); とベタに記述すれば回避できますが、ちょっと違和感を感じます。 このような場合、どのような記述がベターなのでしょうか?

  • スマートフォンサイトへのリダイレクト

    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にアクセスされたときに、ここに飛ばせたい。 詳しい方がいましたらよろしくお願いします。

  • 作っているHPで

    HPのことで非常に困っています。 作っているHPで、</html>の後に入力していない文字が入っています。 <script language="JavaScript"> <!-- var SymRealOnLoad; var SymRealOnUnload; function SymOnUnload() { window.open = SymWinOpen; if(SymRealOnUnload != null) SymRealOnUnload(); } function SymOnLoad() { if(SymRealOnLoad != null) SymRealOnLoad(); window.open = SymRealWinOpen; SymRealOnUnload = window.onunload; window.onunload = SymOnUnload; } SymRealOnLoad = window.onload; window.onload = SymOnLoad; //--> </script> 何か不都合でしょうか?。 対処法をお教えください。