html css 画面がはみ出している問題

html5 css3 にてスマホサイトを作っておりますが
下記のコードでは右横に画面がはみ出して表示されており左右に動きます

width=750はdevice-widthに変えれない事情があるので、
この状態で他に画面内に収める方法はありますでしょうか。

【html】
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8" />
<head>
<meta name="viewport" content="width=750px, height=device-height, initial-scale=1, user-scalable=no">
・
・
・

【css】
HTML{
width: 100%;
} 

body { 
width: 100%;
position:relative;
margin: 0px;          
padding: 0px;         
}

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

回答3件

ベストアンサー

表示させるだけであれば以下ではどうですか？

HTML
1
2<meta name="viewport" content="width=750px">

投稿2018/06/04 22:30

yoshinavi

総合スコア3523

退会済みユーザー

2018/06/05 12:16

現在と同じ設定ですがどういう意味でしょうか？

yoshinavi

2018/06/05 12:28

少し説明不足でした。私の考えとしては 1.「initial-scale=1」これがあるために、スマホ等のCSSピクセルが750px以下のデバイスでは、幅を750pxで表示するので、これを削除。 2.「幅」を基準にしたいので「height=device-height」も削除。 3.デバイスよっては幅が小さく表示されるので、見易くするために「user-scalable=no」も削除。との考えで<meta name="viewport" content="width=750px">を提案しました。如何でしょうか？

退会済みユーザー

2018/06/05 13:44

ありがとうございます。消してみましたが特に何も変わりませんでした。

yoshinavi

2018/06/05 14:39

変化なしですか。それであれば、提示いただいたコード以外の部分が原因と思われるので、HTML・CSSの残りの部分、および、キャプチャー画面等もご提示頂くと、私以外の回答者を含めて、より良い回答を得れると思います。

yoshinavi

2018/06/05 14:43

スミマセン。書き忘れていましたが、確認されているOSやブラウザ、デバイスの種類等も併せてご提示ください。

退会済みユーザー

2018/06/10 05:59

ありがとうございます、キャッシュを消したりしたのですが、どこかに残っていたようで、数日したら直っておりました。ありがとうございました。

yoshinavi

2018/06/10 07:39

解決されて何よりです。 (^^)

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

css
1img{
2  max-width: 100%;
3}

のようにして画像のサイズを小さくすればいいんじゃないですかね？

あとは他の方もおっしゃっているように

css
1body{
2  width: 750px;
3  overflow: hidden;
4}

ってしてあげると
はみ出たものは非表示になりますよ。

投稿2018/06/05 16:25

teruri

総合スコア220

ものすごい雑な方法ですが、overflow:hiddenみたいなのを使ってはどうでしょう？
（具体的にどんなサイトが作りたいか/左右はどれだけはみ出てるかなどがわかっていないので使えるのかどうかはわかりませんが。）

投稿2018/06/05 12:18

moscow3

総合スコア201

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

html css 画面がはみ出している問題

関連した質問