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

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

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

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

Q&A

解決済

3回答

6851閲覧

ユーザーエージェントの判定が上手くいかない端末がある(パララックス)

pitacora

総合スコア20

JavaScript

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

1グッド

1クリップ

投稿2016/06/09 16:17

skrollr.jsを使ってパララックスを用いたページを作成しました。
タブレットやスマホではユーザーエージェントを判定してskrollr.jsを読み込ませない静的なページとしています。
クライアントからASUS TransBook T300CHIとSurface proではパララックスが効いた状態となっており、表示がスムーズにならず困っています。

現状、以下のような形でユーザーエージェントを判定しているのですが、クライアントによると変化がなく、まだパララックスが効いている状態のようです。

js

1<script type="text/javascript"> 2 if(!navigator.userAgent.match(/(iPhone|iPad|Android|Linux|touch)/)){ 3 document.write('<script src="/js/skrollr.js"></script>'); 4 } 5</script>

この2つの端末を上手く判定させることはできないでしょうか。
良いお知恵を拝借できないものかと投稿させていただきます。よろしくお願いします。

ikuwow👍を押しています

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

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

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

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

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

guest

回答3

0

ベストアンサー

ちょっと発想を変えてこんな処理にしては如何でしょうか?

javascript

1//ontouchstartが使えるか、かつ画面幅が1280px以下でタッチデバイスかを判定 2if(window.ontouchstart !== null && window.parent.screen.width < 1280) { 3 document.write('<script src="/js/skrollr.js"></script>'); 4}

投稿2016/06/09 16:31

編集2016/06/10 04:20
fuji_fe

総合スコア93

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

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

edo_m18

2016/06/10 02:16

ontouchstartって、最近のWindowsノートだとタッチパネル採用していて定義があって誤動作する、みたいなことがあった気がします。
fuji_fe

2016/06/10 04:19

追記しました!
edo_m18

2016/06/10 04:27

ありがとうございます!
kei344

2016/06/10 04:37

この質問文では「ASUS TransBook T300CHIとSurface proでは」となっており、タッチできるノート端末も外してよいのではないでしょうか。Surface proの画面は2736 x 1824ピルセルですし、画面幅で処理する事も難しいと思います。(screen.widthが960とか実ピクセルではないものが返ってくるのなら問題ないと思いますが)
pitacora

2016/06/10 06:16

回答いただいてありがとうございました。kei344さんのおっしゃる通りで、今回はタッチできるノート端末も除外する必要がありました。 今検証作業をしています、また結果をお知らせに参ります。
pitacora

2016/08/31 23:59

間が空いてしまいました、申し訳ありません。ASUS+Surfaceがうまくいったとおもうと、IE Edgeがうまくいかなかったり…苦戦しておりました。 結局今回はクライアントにそういう仕様であると説明して、解決しました。すこしすっきりしない結末になってしまいましたが、本当にありがとうございました。
guest

0

JavaScript

1// if(!navigator.userAgent.match(/(iPhone|iPad|Android|Linux|touch)/)){ 2// ↓ ↓「i」(大文字小文字無視)を追加 3 if(!navigator.userAgent.match(/(iPhone|iPad|Android|Linux|touch)/i)){ 4```もしくは 5```JavaScript 6// ↓追加(小文字化関数)↓ ↓ ↓ ↓ ↓全部小文字にする 7 if(!navigator.userAgent.toLowerCase().match(/(iphone|ipad|android|linux|touch)/)){

【歌うキツネ : User-Agent (ユーザー エージェント) 一覧】
http://utaukitune.ldblog.jp/archives/65696057.html

Mozilla/5.0 (Windows NT 10.0; Win64; x64; Trident/7.0; Touch; rv:11.0) like Gecko

投稿2016/06/09 16:47

kei344

総合スコア69364

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

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

0

touchTouchじゃないですかね?
i修飾子をつけてcase-insensitiveな判定をするほうがいいですが)

また,判定条件に欠陥がありそうなので,完成されたライブラリを使うほうが無難かもしれません.ぱっと見ただけでもデスクトップ環境のLinuxユーザ度外視してるような…

投稿2016/06/09 16:48

mpyw

総合スコア5223

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

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

mpyw

2016/06/09 16:49

「window.ontouchstart」が最適解ですね
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問