WordPress : Comment afficher la vue mobile sur un appareil mobile ?
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">
0 commentaire