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

Posted

技术标签:

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

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

https://www.pdfcar.com

【问题讨论】：

【参考方案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" ><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 >Field one</td>
                <td  class="generaltext">AAAAAAAA</td>
                <td  class="tablerowwidth3"></td>
                <td  class="tablerowwidth3"></td>
            </tr>
            <tr>
                <td >Field one</td>
                <td  class="generaltext">BBBBBBBB</td>
                <td  class="tablerowwidth3"></td>
                <td  class="tablerowwidth3"></td>
            </tr>
            <tr>
                <td >Field one</td>
                <td  class="generaltext">CCCCCCCCC</td>
                <td  class="tablerowwidth3"></td>
                <td  class="tablerowwidth3"></td>
            </tr>
            <tr>
                <td >Field one</td>
                <td  class="generaltext">DDDDDDDD</td>
                <td  class="tablerowwidth3"></td>
                <td  class="tablerowwidth3"></td>
            </tr>
            <tr>
                <td ></td>
                <td  class="generaltext">EEEEEEEE</td>
                <td  class="tablerowwidth3"></td>
                <td  class="tablerowwidth3"></td>
            </tr>
            <tr>
                <td >Field one</td>
                <td  class="generaltext">FFFFFFFF</td>
                <td  class="tablerowwidth3"></td>
                <td  class="tablerowwidth3"></td>
            </tr>
            <tr>
                <td >Field one</td>
                <td  class="generaltext">GGGGGGGG</td>
                <td  class="tablerowwidth3"></td>
                <td  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?。

以上是关于如何在移动设备中显示移动视图？的主要内容，如果未能解决你的问题，请参考以下文章

在移动设备中选择视图，例如下拉菜单，而不是模态[关闭]

如何始终在移动设备和 iPad 上显示数字输入微调器

切换到响应式移动设备时如何并排对齐四个div

当我将屏幕大小调整为移动设备时，我的网站移动视图在桌面上正确显示隐藏元素，但在我的手机上它们没有隐藏

Bootstrap 3 - 移动设备上的桌面视图

JQuery Mobile 1.4 如何在移动设备上禁用悬停效果