おしえて

jQueryで画面サイズによってスマホ専用ページに遷移させたい

解決済

質問者：chinmokumogura
質問日時：2022/01/27 18:10
回答数：6件

ホームページを既に運用していますが、PCページ中心なので、これからスマホページを充実させようと考えています。

スマホを利用している閲覧者には、PCページから自動的にスマホページに移ってもらいたいので、画面の横幅の数値を取得して、指定のURLに移るようjQueryを使おうとしていますが、うまくいきません。
スマホの機種名などを利用した「ユーザーエージェント判定」では、難なくできました。
画面幅判定では、PCなどで幅を変えた時は、問題なく自動でURLが移りますが、読み込み時やスマホでは全く変わりません。つまりPCページのままです。

画面幅判定は、これからも何かと使うことがあるだろうし、何か基本的なことを見落としているのではないかと気になっています。
jsは、jQueryしかわかりませんし、かなりの初心者です。
ご指導頂ければ幸いです。

PCページに書き込む　jQuery　の一例です。

$(window).on('load resize', function(){
var width = $(window).width();
if(width <= 440) {
// ↑スマホの横幅を440px以下と設定
window.location.href = 'http://〇〇〇.htm';
// ↑自動で移したいスマホ専用ページです
}
});

色々調べて試してみたのですが、何度やっても読み込み時に移りません。
基本的なミスがあるのではないかと思い、質問させて頂きます。
どなたか教えて頂けないでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者：ほーほけきょッ
回答日時：2022/01/30 10:00

No.4：追記

たぶんですが、「正しい値」を勘違いしているのではないでしょうか？
「正しい値」は、スケーリングなどを考慮したブラウザ（HTML）から見たときのピクセル数です。デバイスのピクセル数ではありません。

当方では、下記のソースで確認しています。

●a.html＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【Ａ】</title>
<script type="text/javascript">
function func()
{
var width = window.innerWidth;
alert( width );
if( width < 1000 ) location.href = 'b.html';
}
</script>
</head>
<body onload="func();">
<FONT SIZE="+20">Ａ</FONT>
<body>

●b.html＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【Ｂ】</title>
</head>
<body>
<FONT SIZE="+20">Ｂ</FONT>
<body>

- 0
- 件

通報する

この回答へのお礼

検証に時間がかかり、お礼が遅くなり申し訳ありません。
コードを丁寧に書いて頂き誠に有り難うございました。
このコードでURLの遷移は確認できました。
遷移が確認できましたので、安心できました。
誠に有り難うございました。

一つお聞きしたいのですが、「alert( width );」で数字が表示されます。
PCのブラウザでは、幅を縮小すれば、その値に変わります。
一方、手持ちのスマホでは、この数字は全て「980」です。
if( width < 1000 ) 　であれば、URLは遷移しますが、if( width < 900 ) にすると、遷移しません。(実際にやってみました)
この結果は間違っていないでしょうか？

通報する

お礼日時：2022/01/30 14:06

No.6

回答者：ほーほけきょッ
回答日時：2022/01/30 14:14

No.5：追記

width() や innerWidth ですが viewport の設定や端末の仕様などにも影響されますので、それで間違っていません。ただ、このような場合は、あまり意味がないのかもしれません。
画面サイズを元に切り分けるのでしたら、単に画面が縦長ならばスマホレイアウト、それ以外ならばPCレイアウトという判断を私ならば入れると思います。

- 0
- 件

通報する

この回答へのお礼

色々なご指導を頂き、誠に有り難うございました。
スマホの横幅の値は一つと勘違いしていたのが大きな原因でつまずいてしまい、大変お手数をおかけしました。
これで次に進むことができます。

あらためてお礼を申し上げます。
本当に有り難うございました。

通報する

お礼日時：2022/01/30 18:13

No.4

回答者：ほーほけきょッ
回答日時：2022/01/29 19:45

No.3：追記

<body onload="func();"> で、
func()内で window.innerWidth が正しい値を返していることを確認しました。

- 0
- 件

通報する

この回答へのお礼

続けてご回答頂き、誠に有り難うございます。
下記の通りでよろしかったでしょうか？

<body onload="func();">
<script>
function func(){
var width = window.innerWidth;
if(width <= 440) {
window.location.href = 'http://〇〇〇.htm'';
}
}
</script>
　　・
　　・
</body>

body内のあちこちにこの<script>置いてみましたが、結果は同じみたいです。

お聞きしたいのですが、
「正しい値を返していることを確認した」ということですが、スマホサイト専用のURLに遷移したでしょうか？
正しい値を返していても、何らかの理由で、遷移しないとは考えられないでしょうか？
何度もお手数をかけして申し訳ありません。

通報する

お礼日時：2022/01/29 20:44

No.3

回答者：ほーほけきょッ
回答日時：2022/01/28 19:44

No.2：追記

これだと、どのような値が得られますでしょうか？

var width = window.innerWidth;

- 0
- 件

通報する

この回答へのお礼

続けてご回答頂き、誠に有り難うございます。

var width = $(window).width();　を
var width = window.innerWidth; 　に変えたらどうなるかということだと思いますが、全く同じ結果となりました。
PCなどで幅を変えた時は、問題なく自動でURLが移りますが、読み込み時やスマホでは全く変わりません。
何度もお手数をおかけし、申し訳ありません。

通報する

お礼日時：2022/01/28 22:26

No.2

回答者：ほーほけきょッ
回答日時：2022/01/28 16:49

No.1：追記

$(document).ready(function(){

が良いかなと思っていたのですが、<body>タグのタイミングがいいかもしれません。とりあえず、タイミングをいろいろ変えてみて、width が正しく取得できているか（取得できるタイミングかどうか）を確認してみてはいかがでしょうか。

<body onload="function();">

- 0
- 件

通報する

この回答へのお礼

続けてご回答頂き、誠に有り難うございます。
下記の通りでよろしかったでしょうか？

<body onload="func()">
<script>
function func(){
var width = $(window).width();
if(width <= 440) {
window.location.href = 'http://〇〇〇.htm'';
}
}
</script>
　　・
　　・
</body>

body内のあちこちにこの<script>置いてみましたが、結果は同じみたいです。
ブラウザの横幅を変えるとこのscriptは間違いなく起動します。
setTimeout(function()でタイミングを遅らせたりしましたが、反応しません。
ご指摘の通り、読み込み時にwidth が正しく取得できていないようです。

通報する

お礼日時：2022/01/28 19:23

No.1

回答者：ほーほけきょッ
回答日時：2022/01/27 20:05

on load じゃなくて ready かな。

- 0
- 件

通報する

この回答へのお礼

早速、ご回答頂きまして誠に有り難うございます。

1行目の
$(window).on('load resize', function(){
でしょうか？
$(window).on('ready resize', function(){
で試してみましたが、変わりませんでした。
これでよろしかったでしょうか？

通報する

お礼日時：2022/01/27 20:39

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！