質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

.htaccess

Apacheウェブサーバーにおいて、ディレクトリ単位で設置及び設定を行う設定ファイルを指します。

Q&A

解決済

1回答

2849閲覧

レスポンシブ以外のスマホ、PC表示切り替えについて

r_iida

総合スコア99

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

.htaccess

Apacheウェブサーバーにおいて、ディレクトリ単位で設置及び設定を行う設定ファイルを指します。

0グッド

0クリップ

投稿2017/03/10 03:13

編集2017/03/10 07:27

一般的なレスポンシブデザインでは、アクセスしている環境の画面のサイズでCSSの表示を切り替えることが多いと思います。(metaのviewportとCSSのmedia query)
そのため、PCのブラウザでも幅を狭めるとスマホ表示用のCSSに切り替わります。

その他の方法として.htaccessで端末を識別して切り分ける方法もあるかと思います。
その場合は、スマホ用のURLが下記のように
http://hoge.com/sp/
http://m.hoge.com/
別になり更新が2カ所になる、SEOのアクセスが別れるなどのデメリットがあると思います。
参考サイト
https://allabout.co.jp/gm/gc/386483/

サイトを見ていると、URLが同じにも関わらずPCで見たときはPC表示、スマホで見たときはスマホ表示になり、PCブラウザを狭めても表示が切り替わらないものもあります。
例えばLIGのサイトなどもそうです。
https://liginc.co.jp
ソースを見るとこのサイトにもmetaのviewportが書いてあるのですが、こうした仕組みのサイトはいったいどうやって端末の識別とワンソースURLを実現しているのでしょうか。

また、この仕組みを使えるとスマホで「PC表示」「スマホ表示」の切り替えボタンを設置することもできるのでしょうか。

※追記1
先ほど、同一URLで端末識別を行っている例としてLIGを上げましたが、
このteratailのWebサイト自体もその仕組みで作られておりました。
https://teratail.com/
このサイトをPCブラウザで狭めても表示は変わりませんが、
スマホでアクセスすると同一URLのままスマホ表示に切り替わります。
ソースには下記のviewportが書いてあります。
<meta name="viewport" content="width=1024">

※追記2
本質問の「関連した質問」にあるこちらの質問は内容が似ているかもしれません。こちらも合わせて読んでみます…
teratail,dotinstallのようなスマホのみデザインが切り替わる仕組み

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Apache や Nginx などでデバイスの振り分け方法はわかってくるのですが
Apache は http://acthd.co.jp/blog/coding/101/ などを見てみてはどうでしょうか
Nginx は http://qiita.com/cactanaka/items/0185bf9a55f5f189e64e なんてなのはどうでしょうか
(どちらも動作確認していませんが)
そして切り替えするには 構成を /pc/ と /sp/ などを作りリンクで http://example.com/pc/ などに飛ばすようにしておいて見ればどうでしょうか

投稿2017/03/10 03:27

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

r_iida

2017/03/10 07:21

ありがとうございます!取り急ぎ御礼をいたします。 いただいた記事を拝見後、また正式に書かせていただきます。 なお、先ほど事例としてLIGを上げましたが、このteratail自体も同様でした。 (質問に追記しました) 切り替えボタンは「/pc/」「/sp/」などではなく同一URLのまま実現するのは難しそうでしょうか。
退会済みユーザー

退会済みユーザー

2017/03/10 07:39 編集

それならば Cookie 作成させる方法などがありますが私にはやり方がわかりません... https://www.xserver.ne.jp/ こちらのサイトでは xservernejp_pclayout という Cookie を使って判断していました。 あと、一部質問を見逃していたのですがSEO的に評価が下がると書いてあったのですが <link rel="canonical" href="URL"> でURLの統一ができます。https://ferret-plus.com/1809 こちらのページなど見てはどうでしょうか。
r_iida

2017/03/14 13:47

ありがとうございます! お返事が遅くなってしまい申し訳ございません。 Nagaiさんにいただいた情報を元に私の方でも調べてみました。 xserverのページのmain.jsには確かにCookieによる切り替えぼたん(xservernejp_pclayout)らしき記述がありました! また、Cookieを元に切り替えるという情報として下記の記事とサンプルを見つけました。 http://www.webdlab.com/labs/style/ http://www.webdlab.com/labs/style/sample/ また、同じ方の記事でJavascriptでユーザーエージェントを判断して切り分けるサンプルもありました。 http://www.webdlab.com/labs/style-2/ http://www.webdlab.com/labs/style-2/sample/ こちらはURLもかわらずサイトも1種類で理想的な動きのように思えました。 その他にPHPによってユーザーエージェントを読んで切り替える方法もあるようでした。 http://blog.h-wd.info/2015/07/29/three-ways-to-detect-a-mobile-device-by-user-agent/ いろいろとヒントをいただけたおかげで理解に近づいた気がいたします。 ありがとうございました!
r_iida

2017/03/14 13:49

<link rel="canonical" href="URL">によるURLの統一もありがとうございます! 今後、同一内容でURLが変わるときに活用させていただきます♪
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問