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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

535閲覧

スマホからPCサイト閲覧について

Teru1

総合スコア9

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2020/08/23 04:02

編集2020/08/23 06:47

同一URLでユーザーエージェントを使って、スマホとPCのサイトを別けて表示しています。

スマホサイトで『PCサイト』というボタンをクリックするとPCサイトを閲覧できるようにしたいのですが、どのようにすればできるでしょうか?

(注記)
Java Scriptでユーザーエージェントを使って、アクセスした端末に合わせて、css、js等のファイルを別のものを読み込ませ、同一URLでスマホ用、PC用それぞれのサイトを作成しています。

しかし、利用者によっては、スマホ・タブレットを利用していてもPC用のサイトを見たい方もおられると思うので、『PCサイト』というボタンを設置して、スマホ・タブレットからPCサイトにアクセスできるようにしたいです。ただ、ユーザーエージェントで読み込むcss、js等のファイルを変えているので、どのようにしたらPC用サイトを表示でき、また、元に戻したい場合は、スマホ用のサイトに戻れるのかご教授いただきたいです。

現状
if (navigator.userAgent.match(/iP(hone|od|ad)|Android.+Mobile/)) {
スマホ用css、jsファイル}
Else{
パソコン用css、jsファイル
}
という形で、スマホ用とPC用で別のファイルを読み込むようにしてます。

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

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

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

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

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

m.ts10806

2020/08/23 06:25

調べてもなにもでてきませんか? あとブラウザによっては「PCサイト」「デスクトップモード」のように切り替えの機能がついていたりしますが、それではダメでしょうか。 あと、ユーザーエージェントでわけてるなら、物理的に無理では? まあ、どのように組んでいるか次第なので、この内容だけでは答えようがありません。現状の実装がわかる情報を提示してください
guest

回答1

0

『PCサイト』というボタンを設置して、スマホ・タブレットからPCサイトにアクセスできるようにしたいです。

UAで切り分けるという設計は大きく変更しなければなりません。

  1. <html> 要素に class を与えてCSSの効果を切り分け、JavaScript で class を付け替える

メディアクエリが登場する直前によく利用されていた手法です。
2. メディアクエリを使ってCSSで切り替える。
高機能端末ですと、画面の回転による表示変化などもありますので、対応させたいパターンも増えます。

ご質問の、User−Agentによる切り分けは PC/ガラケーでは有効ですが、PC並みの表示が可能な高機能端末では、レスポンシブデザインも意識したメディアクエリを使う手法が採用される時代になっています。

ただ、画面上のボタン(『PCサイト』)を活かすには、2.の場合でも 1.の手法を取り入れることになると思います。

上記手法を、1枚のスタティックページで試し、設計の見直しを行ってみてください。

投稿2020/08/24 21:28

AkitoshiManabe

総合スコア5434

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

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

Teru1

2020/08/26 09:06

貴重なご意見ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問