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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

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

Q&A

解決済

1回答

527閲覧

カスタムデータ属性のv-bindがモバイル端末でのみ動作していない。

take-t.t.

総合スコア360

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

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

0グッド

0クリップ

投稿2019/11/07 20:57

編集2019/11/25 14:39

いつもお世話になっております。
今困っていることはタイトル通りでして、iPhone8, 6plus, 6のchromeとsafariで確認した所、何故かモバイル端末でのみv-bindしたdata-textが上手く:beforeattr関数で受け取れていないようで、表示が崩れてしまっています。
そして何故かcssの指定も効いていません。

実際の挙動については以下の画像をご覧いただくとわかりやすいと思います(こちらは6plusのchromeでのものになります)。

モバイルでの表示:
何故か擬似要素beforeでのテキストが表示されておらず、font-sizeもばらばらになってしまっています。
イメージ説明

PCでの表示:
期待した動作をしてくれています。
イメージ説明

そしてこのタイトル画面の後に表示される<header-component/>内の同じコードで書かれた背景は何故か問題なく表示されています。
イメージ説明

エラーは出ていませんし、自分で何度コードを見直してもおかしなところは見つけられませんでした。
皆様、よろしければお力添えをお願いいたします。

該当部分のコード

関係ない部分は削ってあります。
ちなみにVueのmixinはモバイルブラウザ用のvh設定用のもので、Sassでincludeしているのは、text-shadowを付けるものとflexboxを使った中央揃えのコードです。

それと一応、正常に表示されている方の<header-component/>のコードも貼らせていただきます。
質問文内に記載するとあまりに長くなってしまうので、githubのリンクで失礼させて下さい。
https://github.com/taku-hu/my-portfolio-site/blob/master/src/components/Header.vue

以下のコードをは一番初めに表示される、app.vue内のタイトル画面のコードです。

html

1<template> 2 <div id="app"> 3 <transition name="switch" mode="out-in"> 4 <div v-if="!titleCall" key="title" class="title-call"> 5 <div class="background"> 6 <p v-for="sentence in bgSentences" :key="sentence"> 7 <span :data-text="sentence">{{ sentence }}</span> <!-- ※該当箇所 --> 8 </p> 9 </div> 10 <h1>{{ title }}</h1> 11 </div> 12 <div v-else key="contents" class="contents"> 13 <header-component /> 14 <transition name="switch"> 15 <router-view/> 16 </transition> 17 <footer-component/> 18 </div> 19 </transition> 20 </div> 21</template>

JavaScript

1export default { 2 name: 'App', 3 mixins: [mobileBrowser], 4 data() { 5 return { 6 bgSentences: [ 7 '背景用の適当な文字列', //この後30個ほど続きます。 8 ], 9 }; 10 }, 11 components: { 12 HeaderComponent, 13 FooterComponent 14 } 15}; 16</script>

css

1html { 2 font-size: calc(62.5% + 0.5vw); 3} 4body { 5 font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', 6 Meiryo, 'MS Pゴシック', sans-serif; 7} 8#app { 9 @include center-styling; 10 text-align: center; 11 overflow: hidden; 12 13 .title-call { 14 @include center-styling; 15 position: relative; 16 width: 100%; 17 height: calc(var(--vh, 1vh) * 100); 18 background-color: rgb(15, 54, 167); 19 background-image: linear-gradient(90deg, rgba(15, 54, 167, 1) 40%, rgba(0, 163, 254, 1) 100%); 20 overflow: hidden; 21 .background { 22 position: absolute; 23 top: 0; 24 left: 0; 25 white-space: nowrap; 26 user-select: none; 27 p { 28 font-size: 1rem; 29 color: rgba(255, 255, 255, 0.3); 30 transition: 0.5s; 31 overflow: hidden; 32 border-bottom: 1px solid rgba(255, 255, 255, 0.12); 33 span { 34 position: relative; 35 display: inline-block; 36 padding: 5px 0 5px 5px; 37 letter-spacing: 1px; 38 &:before { 39 content: attr(data-text); //※該当箇所 40 position: absolute; 41 top: 0; 42 left: -100%; 43 padding: 5px 0 5px 5px; 44 } 45 } 46 &:nth-child(odd) span { 47 animation: slide 20s linear infinite; 48 } 49 &:nth-child(even) span { 50 animation: slide-reverse 20s linear infinite; 51 } 52 } //p 53 } //.background 54 h1 { 55 @include txt-neon-shadow; 56 font-family: 'Orbitron', sans-serif; 57 font-size: 5rem; 58 font-weight: bold; 59 color: #fff; 60 } 61 } //.title-call 62 63 .contents { 64 @include center-styling; 65 width: 100%; 66 section { 67 @include center-styling; 68 width: 100%; 69 } 70 a { 71 text-decoration: none; 72 } 73 } //.contents 74} //#app 75 76//背景用スライドアニメーション 77@keyframes slide { 78 0% { 79 transform: translateX(100%); 80 } 81 100% { 82 transform: translateX(0); 83 } 84} 85@keyframes slide-reverse { 86 0% { 87 transform: translateX(0); 88 } 89 100% { 90 transform: translateX(100%); 91 } 92}

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

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

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

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

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

yambejp

2019/11/08 01:31 編集

imgur.comはセキュリティエラーがでるので画像は直接貼ったほうがよいのでは? モバイルとは各種OS、ブラウザで横断的にしらべたのでしょうか? 特定のOS、ブラウザの問題なのでしょうか?
take-t.t.

2019/11/08 07:34

ご指摘ありがとうございます。 質問文に情報を追記させていただきました。 ただgifが2MB以下にする事が難しいので一旦画像はこのままとさせてください。
yambejp

2019/11/08 08:13

gifの制限はわかりましたが、リンク先は見ることができません jpegかなにかで手書きでいいので図示したほうがよいでしょう
take-t.t.

2019/11/08 09:26 編集

申し訳ありません、imgurがセキュリティエラーで見れないことを考慮していませんでした。 gifを静止画に変更し、説明を追記させていただきました。
FKM

2019/11/22 02:24

v-bind:data-textを:data-textと省略記法にしても駄目でしょうか?
take-t.t.

2019/11/22 13:51

現在は全て省略記法になっているのですが相変わらずうまく表示できておりません...
FKM

2019/11/25 00:15

同じCSSを読み込んでいるのでしょうか?表示されているページとされていないページに記述されているCSSをwinmergeなどで比較しても差違は出てませんか?
take-t.t.

2019/11/25 13:03

cssは別ですが、背景描画部分は全く同じコードです。
guest

回答1

0

自己解決

.title-call内のh1を、position: absoluteを指定してz-index.backgroundより上げた画面いっぱいに引き伸ばされたdivで囲んだ所、モバイルブラウザでも正常に表示されるようになり、一応解決しました。
ただ、肝心のv-bindが効いていなかった背景部分のコードは一切弄っておらず、そのdivが無かった場合、何故PCはOKでモバイルでは駄目なのか、それがVueの挙動にどう関係するのか理由がよく分かりませんでした。

コメントを下さった皆様、ありがとうございました。

投稿2019/11/25 14:25

take-t.t.

総合スコア360

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問