0
モバイルブラウザウィンドウで自分のWebページが正しくスケールされないという問題に対処すると、特にfloat:leftプロパティはすべて無視されます。その理由の1つは、幅/私がやったように高さ。携帯にやさしい方法でCSSを修正するためのアドバイスはありますか？一般的にはモバイルブラウザ用のWebページスケーリング
body {
height: 100%;
}
#header_chat {
height: 100%;
}
#header_logo_menu {
background-color: #fedc3d;
width: 700px;
height: 171px;
float:left;
border-top: 5px solid #01abaa;
border-left: 5px solid #01abaa;
}
#header_right_menu {
height: 171px;
overflow: auto;
background: #01abaa;
border-top: 5px solid #fedc3d;
border-right: 5px solid #fedc3d;
}
#chat_big {
height: 100%;
}
#chat_messages {
width: 700px;
float: left;
height: 570px;
overflow-x: hidden;
overflow-y: hidden;
}
#inner_messages {
width: 700px;
height: 570px;
font-size: 14px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
background: #fedc3d;
color: #000000;
border: 5px solid #01abaa;
word-wrap: break-word;
white-space: initial;
}
#user_list {
height: 560px;
overflow: hidden;
background: #01abaa;
border: 5px solid #fedc3d;
}
#chat_text {
float:left;
width:50%;
height:55px;
border: 5px solid #01abaa;
font-size: large;
resize: none;
}
#send_message_button {
width:20%;
height: 68.5px;
float: left;
font-size: 16px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
}
#send_message_button:hover {
border: 5px solid #01abaa;
background-color: #fedc3d;
padding: 16px 32px;
text-align: center;
text-decoration: none;
transition-duration: 0.1s;
cursor: pointer;
}
#profile_button {
width: 15%;
height: 68.5px;
float: left;
font-size: 16px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
}
#profile_button:hover {
border: 5px solid #01abaa;
background-color: #fedc3d;
padding: 16px 32px;
text-align: center;
text-decoration: none;
transition-duration: 0.1s;
cursor: pointer;
}
#log_out_button {
width:13.85%;
height: 68.5px;
font-size: 16px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
}
#log_out_button:hover {
border: 5px solid #01abaa;
background-color: #fedc3d;
padding: 16px 32px;
text-align: center;
text-decoration: none;
transition-duration: 0.1s;
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<link href="../styles/style.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content='width=device-width; initial-scale=1.0; maximum-scale=1.0'>
<title>Chat App Home</title>
</head>
<body>
<div id="header_chat">
<div id="header_logo_menu">
</div>
<div id="header_right_menu">
</div>
</div>
<div id="chat_big">
<div id="chat_messages">
<div id="inner_messages">
</div>
</div>
<div id = "user_list">
<div id="users_online">
</div>
</div>
<div>
<textarea id = "chat_text" name = "chat_text"></textarea>
<input type = "button" id = "send_message_button" value = "Send Message"/>
<input type = "button" id = "profile_button" value = "My Profile"/>
<input type = "button" id = "log_out_button" value = "Log Out"/>
</div>
</div>
</body>
</html>
正しく縮尺された意味は？期待どおりの結果は何ですか？ – repzero
さて、私が期待するのは、すべてのdivブロックが、モバイルでブラウジングしているときに同じではない非モバイルバージョンでのやり方で浮かんでいるのを見ることです。 2つ目のことは、幅と高さの宣言がモバイルの使用に適しているかどうか、また変更がこのように適用できるかどうかわからないことです。 –
あなたの質問を編集してあなたのCSSを追加してください – mlegg