HTMLをタブレットで表示すると右端が見切れてしまいます

WEBサイトの制作練習をしています。

サイトをタブレットで表示すると、右端だけ見切れてしまいます。
対応策として、画面が見切れないようにviewportを設定したのですが、タブレットの表示がよくなった（それでも右端が少し見切れる）代わりにスマホ用のレスポンシブ対応のレイアウトが表示されなくなってしまいます。

実現したいこと

PC、スマホ、タブレットで正しいレイアウトで表示されるようにしたいです- リスト。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width">
6    <title>雪国食堂</title>
7
8    <link rel="stylesheet" href="css/sanitize.css">
9    <!-- ozwald font -->
10    <link rel="preconnect" href="https://fonts.googleapis.com">
11    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
13
14    <link rel="stylesheet" href="css/style.css">
15    <script>
16        var contentWidth = 1200;
17        var ua = navigator.userAgent;
18        if((ua.indexOf('Android') > 0 && ua.indexOf('Mobile') == -1) || ua.indexOf('iPad') > 0 || ua.indexOf('Kindle') > 0 || ua.indexOf('Silk') > 0){
19          // for tab
20          document.write('<meta name="viewport" content="width=' + contentWidth + '">');
21        } else {
22          // not tab
23          document.write('<meta name="viewport" content="width=device-width">');
24        }
25    </script>
26    <script src="https://kit.fontawesome.com/4f435c9a89.js" crossorigin="anonymous"></script>
27    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
28    <script src="js/script.js"></script>
29  
30</head>

CSS
1html,body{
2    width: 100%;
3}

試したこと

・<meta name="viewport" content="width=device-width" >から<meta name="viewport" content="width=1200">に変更

・CSSに「html,body{width: 100%;}」を追加

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

回答2件

そのやり方はどうかなあ、と思います。

iPadの記述が判定できるのはiOS 12まで
【解説】iPad OSのユーザーエージェントに「iPad」が含まれない理由 | WEB業界で働く人や興味がある人に役立つ情報サイト"qam（カム）"

できればまずは回避するようにしてください。
ユーザーエージェント文字列を用いたブラウザーの判定 - HTTP | MDN

コードがないので推測ですが、おそらく body からはみ出している要素があるのだと思いますので、そちらを対処した方がいいだろうと思います。

投稿2022/08/09 03:05

Lhankor_Mhy

総合スコア36104

私が思うことは真実です

CSS
1@media only screen and (device-width: 768px) {
2  /* For general iPad layouts */
3}
4
5@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
6  /* For portrait layouts only */
7}
8
9@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
10  /* For landscape layouts only */
11}