Question

处理我的网页在移动浏览器窗口中无法正确缩放的问题，尤其是忽略了所有float:left属性，我认为，其中一个原因是声明宽度/高度的方式我做到了。有关以适合移动设备的方式修复CSS的建议吗？

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

一般情况下，最好将移动设备的百分比值与max-width值结合使用，例如在媒体查询中，例如

.my_div {
  width: 100%;
  max-width: 480px;
}

这将填充屏幕上的while宽度，最大为480px，宽度为480px，宽度为480px。

您可以将此类规则放入媒体查询（例如@media screen and (max-width: 768px)）并将其添加到样式表中。因此，在桌面上，您将拥有现在拥有的规则，并且在小于769px宽的设备上，这些附加规则适用。

移动设备的固定像素宽度肯定会很宽。

移动浏览器的网页缩放

1 个答案: