2021年9月6日月曜日

Bootstrap5 で、エレメントの表示、非表示に挑戦し、iOSのSafariで妥協が必要だった

カゴメ 野菜生活100 マンゴーサラダ 200ml×24本

新品価格
¥1,760から
(2021/9/14 15:15時点)

新しい事をするのをモットーにしており、そりゃ当然、次作るならBootstrap5やろ!

で、ちょっとGoogle siteもやりようで、プロっぽくできるんじゃないかとサーバーレスにこだわり作るサイトで、埋め込みの機能を使って、Bootstrap5で書いたものを入れてちょっとやってみようと思いました。

何とかなりそうだ!と思ったら…
Bootstrap5のエレメントの表示、非表示はなぜか、スマホサイトのはずなのに、スマホと、タブレットと2つ出たりする…

私の書き方が悪いのかと悩みまくりました。

結論「d-noneを入れたらSafariは非表示になる」 

逆に、d-md-block d-lg-none とか指定しても、スマホでもタブレットでもSafariは表示してしまう… ということです。

Androidとか、Chromeはそういうことはない。もう、表示ユーティリティを読んで考えまくったけどわからず、いろいろテストして、上の法則を発見しました。もしかしたら私の書き方がどこかおかしいのかもしれませんが、わからない…
もう、iOSが嫌いだわ。 iPhoneのポイントサイズの一覧 世の中、みんなiPadなんだけどね。

私は、iPhone6S  iPad mini2  iPad3を持っております。 miniもiPadも同じ768サイズなのですね。 また、iphoneとiPadでは同じコラム数になると… ←は感じませんでしたが、みんなiPhoneには苦労しているようですね。で、
もう…諦めまして。



これだったら、埋め込みなんで、普通にCSSの分岐で書いたらよかった…(脱力)
世界に知らせたい事実だと思います。おかしいと思うわ。

これで初めていい感じに表示されました。(←google ドキュメントに保存)

Google siteでは、埋め込むものの縦のサイズは、スマホだと短くなるので、PCとタブレットは具合を見ながら、文章を追加して、表示のバランスを取る必要があります。

表示させたいスプレッドシートに、自動的に3種類の表が生成されるように作り、分岐でデバイスごとにサイズが違う表を表示させることができました。
スプレッドシートの表は、Google siteに埋め込む場合、実際より、30以上大きめに縦がいるようです。(まだ研究中)

Bootstrap5に挑戦する方はお気をつけください。


カゴメ 濃厚リコピン スマートPET 720ml×15本

新品価格
¥3,127から
(2021/9/7 13:49時点)


お問合せフォーム

お名前 :
Email: (必須)
メッセージ: (必須)

 約束しないと、送信できません。再度の場合はリロードが必要です。


0 コメント :

コメントを投稿

コメントありがとうございます。


サイト内検索


View My Stats