CSS
スマホの横長画面対応
スマホを横向きにしたとき、キービジュアルの高さを1vhで指定したときに、高さが足りずレイアウトが崩れるため、最低限の高さを指定。
<style>
/* スマホの細い横長画面対応
* メインビジュアル高さ指定 */
/* 画面高さが540px以下で横向きの場合 */
@media screen and (max-height: 540px) and (orientation: landscape) {
#任意のid {
height: 840px !important;
}
}
/* 縦横比が1200px:768px以下の細長さで横向きの場合 */
@media screen and (max-aspect-ratio: 1200/768) and (orientation: landscape) {
#任意のid {
height: 760px !important;
}
}
</style>
正方形の画像のレスポンシブ対応
画像を正方形で縦横をそれぞれピクセルで指定した際、画面サイズによってはレイアウトが崩れないように小さめに配置することがありますが、1:1の縦横比を保ったまま画面に合わせて、拡大縮小を行う例。
<style>
#任意のid .image.sd {
width: 100%;
height: auto;
aspect-ratio: 1;
}
</style>
Lighthouseパフォーマンス対策
Lighthouseのベンチマークで「パフォーマンス」で指摘される部分の対策。ページ読み込みスピードの高速化に寄与。ページ読み込み時にあらかじめ接続をするpreconnectと、あらかじめ名前解決しておくdns-prefetch。
<link rel="preconnect" href="https://www.googletagmanager.com" />
<link rel="preconnect" href="https://storage.googleapis.com" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://analytics.studiodesignapp.com" />
または
<link rel="dns-prefetch" href="https://www.googletagmanager.com" />
<link rel="dns-prefetch" href="https://storage.googleapis.com" />
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />
<link rel="dns-prefetch" href="https://analytics.studiodesignapp.com" />
