レスポンシブ対応

[x] viewport（ビューポート）を設定する dist/tatLogDiver.min.html および src/tatLogDiver.htmlの <head>内にviewportの設定を追加 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

[x] メディアクエリのブレイクポイントの設定 tatLogDiver.css

 /* メディアクエリの設定　　767px以下: デフォルト は 上述*/
@media (min-width: 768px) { /* 768px以上 */
}
@media (min-width: 992px) { /* 992px以上 */
}
@media (min-width: 1200px) { /* 1200px以上 */
}

Googleモバイルフレンドリーテスト指摘事項

テスト対象

テキストが小さすぎて読めません
クリック可能な要素同士が近すぎます
ビューポートが設定されていません

参考

Googleモバイルフレンドリーテスト簡単！レスポンシブデザインの作り方のすべて

hirosejn / HJN

レスポンシブ対応 #80

Googleモバイルフレンドリーテスト指摘事項

参考