こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

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

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

投稿日時 - 2019-05-22 06:21:59

QNo.9618881

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

そもそも、挙動が違うので、
>パソコン用とスマホ用で別にサイトを作るという回答以外で教えてください。
↑これが必要ですよ。
ただし、一つのページ内に、別サイトを作りますが、
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を使った、スクリプト式になるので、
面倒が増えるかもしれません。

投稿日時 - 2019-05-22 12:32:24

ANo.1

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

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

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

JavaScriptをある程度知っていないと上記の方法や参考サイトの説明の意味が分からないかもしれませんが、質問内容のことがやりたければ知る必要があると思います。

投稿日時 - 2019-05-22 11:52:00

あなたにオススメの質問