HPをスマホで見るとパソコンと異なったプレビューが出ます

前提・実現したいこと

htmlでホームページを作っています。モバイルでもPCと同じように表示させたいです。フレームワークにブートストラップを使用しています。iOSが完全なプレビューに対応していないのか、何かやり方があるのか教えていただければ嬉しいです。ページに関連するファイルは全部コピーしてあります。(プログラミング初心者なので、、、このサイト使うの今日が初めてです。)

発生している問題

スマホでHTMLのファイルのプレビューを表示すると、cssのテキストアニメーションが適用されなくなります。

HTML

HTML
1
2 <div class="cache"></div>    
3        <h1 class="text welcome">あ</h1>
4        <p>&nbsp;</p>
5        <p>&nbsp;</p>
6        <p>&nbsp;</p>
7        <h1 class="fade-in01 caption">あ</h1>
8        <p>&nbsp;</p>
9        <p>&nbsp;</p>
10        <h1 class="fade-in01 caption">あ</h1>
11        <p>&nbsp;</p>
12        <p>&nbsp;</p>
13        <h1 class="fade-in01 caption">あ</h1>
14        <p>&nbsp;</p>
15        <p>&nbsp;</p>
16        <h1 class="fade-in01 caption">あ</h1>
17        <p>&nbsp;</p>
18        <p>&nbsp;</p>
19        <h1 class="fade-in01 caption">あ</h1>
20        <p>&nbsp;</p>
21        <h1 class="fade-in01 caption">あ</h1>
22        <p>&nbsp;</p>
23        <p>&nbsp;</p>
24        <h1 class="fade-in01 caption">あ</h1>
25        <p>&nbsp;</p>
26        <p>&nbsp;</p>
27        <h1 class="fade-in01 caption">あ</h1>
28        <p>&nbsp;</p>
29        <h1 class="fade-in01 caption">あ</h1>
30      </div>
31

###CSS

CSS
1
2.text{
3    font-family: 'arial black';
4    font-size: 60px;
5    text-align: center;
6    padding: 0;
7    margin: 0;
8    margin-left: 50%;
9    transform: translateX(-200%);
10    opacity: 0;
11    animation: slide-in-anim 1.5s ease-out forwards;
12  }
13  
14  @keyframes slide-in-anim {
15    20% {
16      opacity: 0;
17    }
18    60% {
19      transform: translateX(-45%);
20    }
21    75% {
22      transform: translateX(-52%);
23    }
24    100% {
25      opacity: 1;
26      transform: translateX(-50%);
27    }
28  }
29.welcome{
30  color: #000;
31  text-align: center;
32  font-family: Noto Sans JP Medium;
33  font-size: 270%;
34}
35.fade-in01{ 
36  font-size:40px;
37  opacity:0;
38  animation-name: sample01; 
39  animation-duration: 5s; 
40  animation-iteration-count:1;
41  animation-fill-mode: forwards; 
42}
43@keyframes sample01 {
440% {
45  opacity: 0;
46  color:#000;
47}
4890% {
49 opacity: 1;
50 color:#000;
51}
52 100% {
53  opacity: 1;
54  color:rgb(0, 0, 0);
55} 
56}
57.caption{
58  text-align: center;
59  font-family: Noto Sans JP;
60  font-size: 200%;
61}
62

補足情報

ios14.7.1で純正のファイルアプリで表示させました。アプリが対応してないのでしょうか。。。

m.ts10806

2021/08/10 12:10

再現できるコードも何もなしに他者が応えられることはないです。同じ要件でも100人が組めば100通りのコードが出来上がります。

退会済みユーザー

2021/08/10 12:43

そうですね。このサイト初心者なので使い方慣れてなくてすいません

行動規範の内容に同意します

回答2件

純正のファイルアプリは、JavaやCSSの読み込みに対応していなかったそうで、サードパーティのアプリを落とせば問題なく動作しました。
「HTML Viewer Q」

解決方法を書いてくださった方ありがとうございました。

投稿2021/08/11 08:58

退会済みユーザー

総合スコア0

テキストアニメーションというのがtextクラスに対するslide-in-animアニメーションのことを指していて、更に質問文に記載のコードを本当にそのまま保存しているという前提で考えると、.の付け忘れが原因です。

DIFF
1+ .text{
2- text{
3    font-family: 'arial black';
4    font-size: 60px;
5    text-align: center;
6    padding: 0;
7    margin: 0;
8    margin-left: 50%;
9    transform: translateX(-200%);
10    opacity: 0;
11    animation: slide-in-anim 1.5s ease-out forwards;
12}