締切済み

blank パソコンとスマートフォンで使い分けたい

  • 困ってます
  • 質問No.9618881
  • 閲覧数66
  • ありがとう数2
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 23% (8/34)

htmlでサイトを作っています。
新規タブにリンクを貼るときは、target="_blank/" を使用しています。
パソコンで閲覧をする際はリンク先を新規タブにリンク先が表示された方が見やすい。
スマートフォンで閲覧をする際は新規タブにリンク先が表示されると見にくい。

パソコンではリンク先は新規タブに表示、スマートフォンではリンク先は同一タブに表示されるようにしたいのですが、どうしたらよいでしょうか?
パソコン用とスマホ用で別にサイトを作るという回答以外で教えてください。

回答 (全2件)

  • 回答No.1

ベストアンサー率 50% (1273/2520)

コンピューター カテゴリマスター
そもそも、挙動が違うので、
>パソコン用とスマホ用で別にサイトを作るという回答以外で教えてください。
↑これが必要ですよ。
ただし、一つのページ内に、別サイトを作りますが、
PC用とSP用のサイトを同時に構築させる手法がよく使われます。

<style>
.pc { display: block; }
.sp { display: none; }
@media only screen and (max-width: 750px) { /* SPとみなすサイズを書いておいてください */
.pc { display: none; }
.sp { display: block; }
</style>

後は、
<a class=pc ........... target=_blank></a> <!-- PC用 -->
<a class=sp ...........></a> <!-- SP用 -->
と、メディアクエリ分離するだけでOKだと思いますが。

これでは、ダメでしょうか?
これでNGだと、残りはJQを使った、スクリプト式になるので、
面倒が増えるかもしれません。
  • 回答No.1

ベストアンサー率 45% (44/97)

JavaScriptを利用することになりますが、UserAgent(ブラウザ情報)を取得して、挙動を変える方法が一般的だと思います。

下記に判定方法は書かれていますし同様に調べれば色々でてくると思います。
https://qiita.com/sakuraya/items/33f93e19438d0694a91d

判定ができればそのままJavaScriptでパソコンとスマートフォンでリンクの挙動を変えることが可能です。下記が参考になると思います。他にもやり方はあると思います。
https://blog.supersonico.info/?p=1748

JavaScriptをある程度知っていないと上記の方法や参考サイトの説明の意味が分からないかもしれませんが、質問内容のことがやりたければ知る必要があると思います。
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

ピックアップ

ページ先頭へ