如何在移动设备中显示移动视图？答案

【问题标题】：How to show mobile view in mobile device?如何在移动设备中显示移动视图？
【发布时间】：2019-10-17 00:01:28
【问题描述】：

我的 wordpress 主题有问题，当我在移动设备中打开我的网站时，主题完全是桌面视图，但是当我在检查元素中将视图更改为移动视图时，它可以正常工作。

https://www.pdfcar.com

【问题讨论】：

标签： html css wordpress themes responsive

【解决方案1】：

我不确定我是否理解您的问题，但请尝试将以下行添加到您的 HTML 文件的 <head>-tag 中：

<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name="viewport">

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
    box-sizing: border-box;
}

style>.responsiveImg1 {
    width: 50%;
    max-width: 800px;
    height: auto;
}

.clsdivmain {
    background-color: #660066; /* Green */
}

.center {
    margin: auto;
    width: 60%;
    padding: 10px;
    text-align: center;
}

.table {
    border: 1px solid black;
    width: 70%;
    margin: auto;
}

.table1 {
    padding: 10px;
    width: 70%;
    margin: auto;
}

.table2 {
    width: 70%;
    margin: auto;
    background-size: 70%;
}

.tableheader {
    width: 70%;
    height: 70%;
    margin: auto;
    background-size: 70%;
}

.tablerowwidth {
    width: 50%;
}

.tablerowwidth3 {
    width: 10%;
}

.buttonPay {
    background-color: #660066; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    width: 40%;
}

.buttonCancel {
    background-color: #0071A5; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    width: 40%;
}

.buttonPay1 {
    width: 80%;
    padding: 5px;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
        rgba(0, 0, 0, 0.19);
}

.buttonCancel1 {
    width: 80%;
    padding: 5px;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
        rgba(0, 0, 0, 0.19);
}

.headingtext1 {
    color: #063871;
    font-style: bold;
    font: 22px arial, verdana;
    padding: 5px;
    float: left;
    width: 50%;
    height: 50%;
}

.infoText {
    color: #063871;
    font-style: normal;
    font: 15px arial, verdana;
    align: center;
    float: left;
    width: 100%;
    background-size: 100%;
}

.disclaimerText {
    color: #063871;
    font-style: normal;
    font: 15px arial, verdana;
    align: top;
    float: left;
    width: 100%;
    background-size: 100%;
}

.labels {
    color: #063871;
    font-style: normal;
    font: 15px arial, verdana;
    font-weight: bold;
    align: center;
    padding: 10px;
    float: left;
    width: 100%;
    margin: auto;
    background-size: 70%;
}

.generaltext {
    color: #063871;
    font-style: normal;
    font: 15px arial, verdana;
    padding: 5px;
    align: center;
    float: left;
    width: 100%;
    background-size: 70%;
    margin: auto;
}

.variables {
    color: #063871;
    background-color: #c9c9c9;
    font-size: 15px;
    font-style: normal;
    font: 15px arial, verdana;
    align: center;
    padding: 20px;
    float: left;
    width: 100%;
    background-size: 70%;
    margin: auto;
}

.main {
    background-color: #f1f1f1;
    padding: 20px;
    float: left;
    width: 60%; /* The width is 60%, by default */
}

.right {
    background-color: #4CAF50;
    padding: 20px;
    float: left;
    width: 20%; /* The width is 20%, by default */
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
    .table {
        padding: 10px;
        width: 100%;
        margin: auto;
    }
    .tablerowwidth3 {
        width: 1%;
    }
    .tableheader {
        width: 100%;
    }
    .buttonPay1 {
        width: 100%;
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
            rgba(0, 0, 0, 0.19);
    }
    .buttonCancel1 {
        width: 100%;
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
            rgba(0, 0, 0, 0.19);
    }
    .tablerowwidth {
        width: 100%;
    }
    .headingtext1 {
        width: 100%;
        height: 50%;
    }
    .responsiveImg1 {
        width: 100%;
    }
    .table2 {
        width: 100%;
        margin: auto;
    }
    .tableheader {
        width: 100%;
        height: 70%;
        margin: auto;
    }
    .table1 {
        padding: 10px;
        width: 100%;
        margin: auto;
    }
}
</style>
</head>
<body>
    <table class="tableheader">
        <tr>
            <td align="right"><img src="logo.png" clas="responsiveImg1">
            </td>

        </tr>
    </table>
    <table class="tableheader">
        <tr>
            <td class="tablerowwidth" height="10"><label
                class="headingtext1">Heading 1</label></td>
        </tr>
    </table>
    <div class="infoText">
        <table class="table1">
            <tr>
                <td>Mr, </br>
                </br>Message one</br>Message two</td>
            </tr>
        </table>
    </div>

    <div class="labels">
        <p class="table2">Subheading one</p>
        <table class="table">
            <tr>
                <td width="30%">Field one</td>
                <td width="45%" class="generaltext">AAAAAAAA</td>
                <td width="20%" class="tablerowwidth3"></td>
                <td width="20%" class="tablerowwidth3"></td>
            </tr>
            <tr>
                <td width="20%">Field one</td>
                <td width="45%" class="generaltext">BBBBBBBB</td>
                <td width="10%" class="tablerowwidth3"></td>
                <td width="10%" class="tablerowwidth3"></td>
            </tr>
            <tr>
                <td width="20%">Field one</td>
                <td width="65%" class="generaltext">CCCCCCCCC</td>
                <td width="10%" class="tablerowwidth3"></td>
                <td width="10%" class="tablerowwidth3"></td>
            </tr>
            <tr>
                <td width="20%">Field one</td>
                <td width="65%" class="generaltext">DDDDDDDD</td>
                <td width="10%" class="tablerowwidth3"></td>
                <td width="10%" class="tablerowwidth3"></td>
            </tr>
            <tr>
                <td width="20%"></td>
                <td width="65%" class="generaltext">EEEEEEEE</td>
                <td width="10%" class="tablerowwidth3"></td>
                <td width="10%" class="tablerowwidth3"></td>
            </tr>
            <tr>
                <td width="20%">Field one</td>
                <td width="65%" class="generaltext">FFFFFFFF</td>
                <td width="10%" class="tablerowwidth3"></td>
                <td width="10%" class="tablerowwidth3"></td>
            </tr>
            <tr>
                <td width="20%">Field one</td>
                <td width="65%" class="generaltext">GGGGGGGG</td>
                <td width="10%" class="tablerowwidth3"></td>
                <td width="10%" class="tablerowwidth3"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit"
                    class="buttonPay buttonPay1" name="PayNow" value="Submit"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit"
                    class="buttonCancel buttonCancel1" name="PayCancel"
                    value="Reset"></td>
            </tr>

        </table>
        <div class="disclaimerText">
            <table class="table1">
                <tr>
                    <td align="top">---Disclaimer </br>Field. </br>Field.</br>Field.</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

【讨论】：

欢迎来到 Stack Overflow！虽然这段代码可以回答这个问题，但最好包含一些上下文，解释它是如何工作的以及何时使用它。从长远来看，纯代码的答案往往不太有用。有关更多信息，请参阅How do I write a good answer?。