WordPress : Comment afficher la vue mobile sur un appareil mobile ?

Publié par Jean-Michel le

J’ai un problème avec le thème wordpress, lorsque j’ouvre mon site Web sur mobile, le thème est exactement la vue du bureau, mais lorsque je change la vue en vue mobile dans l’élément d’inspection, cela fonctionne correctement.

صفحه نخست فروشگاه اینترنتی پی دی اف کار

Solution n°1 trouvée

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

Solution n°2 trouvée

Je ne sais pas si j’ai compris votre question, mais essayez d’ajouter la ligne suivante à la <head>balise -de votre fichier HTML :

<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name="viewport">
Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *