小贝子编程

为什么我的 css 在移动浏览器上不受支持?



大家好，大家好，

我是一名初级开发人员，当我在一个主题上挣扎时，这将需要将近两周的时间。我的代码适用于桌面版本和所有浏览器(Chrome，EI，Firefox，Edge(。 另一方面，当我想在移动设备上查看我的页面时，一切都在 safari 上运行良好，但对于 se 来说，那就是 Firefox 和 chrome 是灾难。 我的印象是我的CSS的某些类不受支持。另一方面，当我在我的页面html中将样式置于内联模式时，一切都运行良好，奇怪的是它的所有!!

希望救世主能帮我找到解决办法。我把你放在我的html代码和css下面。

大家好。

body{
background-image: url('img/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
font-family:Arial,Helvetica,sans-serif;
height: 1500px;
margin: 0px;
}
.verso{
width: 370px;                                                       
height:950px ; 
margin-bottom: 0px;

}
.carteModeRecto{
text-align: -moz-center;
-webkit-box-align: center;
width: 370px; 
text-align: left;
margin:auto;
text-align: -webkit-center;
}
.recto,.verso{
text-align: -webkit-center;
text-align: -moz-center;
text-align: -ms-center;
margin-bottom: 50px;
overflow: hidden;
margin-top: 50px;
background-color: white;
box-shadow: 1px 1px 5px 1px black;
}
#photoprofil{
background-image: url("img/photo_roger.jpg");
width: 238px;
height: 240px;
border-radius: 150px;
margin-top: 11px;
text-align: left;
margin: auto;
margin-top: 11px;
text-align: left;
margin: auto;
}
#photoprofil2{
border: 3px solid #e5e5e5;
width: 260px;
height: 250px;
border-radius: 150px 150px;
text-align: left;
margin: auto;
padding-top: 10px;
text-align: left;
margin: auto;
padding-top: 10px;
height: 250px;
}
.ligneinfo{
display: flex;
margin-top: 7px;
}
.buton,.buton2{
display: flex;
cursor: pointer;
background-color: #ca3439;
text-align: center;
border-radius: 10px;
color: white;
text-align: left;
margin:0  auto;
outline: none;
border: none;
border: 2px solid #cb353b;
}
.buton{
margin-bottom: 30px;
width: 280px;
height: 50px;
}
.buton2{
background-color: white;
color: #2e4158;
text-align: left;
margin:0  auto;
margin-bottom: 30px;
width: 280px;
height: 52px
}
.down{
margin-top: 8px;
}
.partag{
margin-top: 4px;
width: 42px;
height: 43px;
}
.qrcode{
border: 2px solid #cb353b;
border-radius: 10px;
margin-top: 50px;
}
.buttontext2,.buttontext{
color: #2e4158;
margin-top: 15px;
font-size: 1em;

}
.buttontext{
color: white;
}

.imgbutton,.imgbutton2{
margin-left: 20px;
height: 42px;
width: 58px;
margin-right: 20px;
margin-top: 8px;
}
.imgbutton2{
height: 42px;
width: 43px;
margin-top: 5px;
}
.info{

margin-left: 35px;
}

.nom,.statu{
font-size: 1.6em;
color: #2e4158;
margin-top: 40px;
text-align: center
}
.statu{
margin-bottom: 30px;
margin-top: 0px;
}
.texte{
margin-top: 5px;
margin-left: 10px;
color: #2e4158;
font-size: 1.2em;
}
.carte{
text-align: -moz-center;
-webkit-box-align: center;
width: 370px; 
text-align: left;
margin:auto;
text-align: -webkit-center;
}
.carte_visite_recto_verso {
	    -webkit-perspective: 740px;   
perspective: 740px;
margin-top: 50px;

}
.carte_visite_recto_verso .carte {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.carte_visite_recto_verso .carte .couche {

margin:0px !important;
-webkit-transition: 1s;
transition: 1s;
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
}
.carte_visite_recto_verso .carte .recto {
position: absolute;
z-index: 1;
}
.carte_visite_recto_verso .carteModeRecto .recto {
-webkit-transform: rotatey(-0deg);
transform: rotatey(-0deg);
}
.carte_visite_recto_verso .carteModeRecto .verso {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.carte_visite_recto_verso .carteModeVerso .recto {
-webkit-transform: rotatey(+180deg);
transform: rotatey(+180deg);
}
.carte_visite_recto_verso .carteModeVerso .verso {
-webkit-transform: rotatey(0deg);
transform: rotatey(0deg);
}

a{
text-decoration: none;
color: #2e4158;
}
.iconinfo{
height: 29px;
width: 25px;
}
.logo{
width: 370px;
padding-top: 30px;
margin-bottom: 20px;
text-align: -webkit-center;
}
.reseaux{
text-align: left;
margin:0  auto;
margin-left:35px; 
margin-top: 60px;
padding-bottom: 70px;
} 
.qrcode{
text-align: left;
margin:0  auto;
width: 280px;
height: 330px;
}
.imgqr{
text-align: left;
margin:0  auto;
margin-left: 45px;
padding-top: 60px;
}
.imglogo{
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image" content="img/photo_roger.jpg">
<meta name="image" content="img/photo_roger.jpg">
<meta name="description" content="Location d'imprimantes et photocopieurs,
Location et vente de matériel informatique,Téléphonie Voip et débit internet,Solutions de commutation" />

<link rel="stylesheet" media="screen" type="text/css" href="style.css">

<title>Roger Duarte : Directeur Commercial - Axium Solutions </title>
<link rel="shortcut icon" href="img/logo2.jpg" type="image/jpg"/>
<link rel="icon" href="img/logo2.jpg" type="image/jpg"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div class="carte_visite_recto_verso" >
<div class="carte carteModeRecto" >
<div class="couche recto" >                      <!--DEBUT DU MODE RECTO-->
<div class="logo">
<img src="img/logo.jpg" alt="" class="imglogo"  >
</div>
<div>                                                                           <!--PHOTO DU CLIENT-->
<div id="photoprofil2">
<div id="photoprofil"></div>
</div>
</div>
<div class="nom" >  
Roger Duarte
</div>
<div class="statu" >
Directeur Commercial
</div>
<a href="download/vcard_roger.vcf"  download>
<div class="buton2">

<img src="img/ico_download.jpg" alt="" class="imgbutton">
<div class="buttontext2" > Télécharger le contact</div>
</div></a>
<div class="buton" 
onclick="$(document).find('.carte').toggleClass('carteModeVerso');
$(document).find('.carte').toggleClass('carteModeRecto');">
<img src="img/ico_partage.jpg" alt="" class="imgbutton2" >
<div class="buttontext"  >Partager</div>
</div>

<div class="info">
<div class="ligneinfo" >
<img src="img/ico_mobile.jpg" alt="" class="iconinfo">
<a href="tel:+33184008621"><div class="texte">01 84 00 86 21</div></a>
</div>
<div class="ligneinfo" >
<img src="img/ico_phone.jpg" alt="" class="iconinfo">
<a href="tel:+33662682503"><div class="texte">06 62 68 25 03</div></a>                  <!--ZONE INFORMATION-->
</div>
<div class="ligneinfo" >
<img src="img/ico_sms.jpg" alt="" class="iconinfo">
<a href="sms:+33662682503"><div class="texte">SMS</div></a>
</div>
<div class="ligneinfo" >
<img src="img/ico_mail.jpg" alt="" class="iconinfo">
<a href="mailto:Roger.duarte@axiumsolutions.fr"><div class="texte" >Roger.duarte@axiumsolutions.fr</div></a>
</div>

<div class="ligneinfo" >
<img src="img/ico_web.jpg" alt="" class="iconinfo">
<a href="http://www.axiumsolutions.fr"><div class="texte">www.axiumsolutions.fr</div></a>
</div>

<div class="ligneinfo" >
<img src="img/ico_adresse.jpg" alt="" class="iconinfo" >
<a href="https://goo.gl/maps/HdY48H9MVqRsX3KR9"><div class="texte" style="text-align: left;" >Immeuble Point Cardinal <br>
                                                      31 Avenue Pierre Brossolette <br>
                                                          91380 CHILLY MAZARIN</a>
</div>
</div>

</div>

<div class="reseaux" >
<div class="ligneinfo" >
<img src="img/ico_linkedin.jpg" alt="" class="iconinfo">
<a href=""><div class="texte">Linkedin</div></a>
</div>
<div class="ligneinfo" >                                                                  <!--ZONE RESEAUX SOCIAUX-->
<img src="img/ico_fb.jpg" alt="" class="iconinfo">
<a href=""><div class="texte">Facebook</div></a>
</div>
</div>                                                                                            <!--FIN MODE RECTO-->
</div>       


	                <div class="couche verso" >                                                           <!--DEBUT MODE VERSO-->
<div class="logo" >
<img src="img/logo.jpg" alt="" class="imglogo"  >
</div>
<a href="vcard_roger.vcf"  download>
<div class="buton2" >
<img src="img/ico_download.jpg" alt="" class="imgbutton" >
<div class="buttontext2" >Télécharger le contact</div>
</div></a>
<div class="buton2">
<img src="img/ico_mail2.jpg" alt="" class="imgbutton">
<div class="buttontext2"   >Partager Par Mail</div>                     <!--ZONE DE PARTAGE-->
</div>
<div class="buton2" >
<img src="img/ico_whatsapp.jpg" alt="" class="imgbutton" >
<div class="buttontext2">Partager par Whatsapp</div>
</div>
<div class="buton2" >
<img src="img/ico_copier.jpg" alt="" class="imgbutton">
<div class="buttontext2"  >Copier le lien</div>
</div>
<div  class="buton" 
onclick="$(document).find('.carte').toggleClass('carteModeVerso');
$(document).find('.carte').toggleClass('carteModeRecto');">
<img src="img/ico_retour.jpg" alt="" class="imgbutton2">
<div class="buttontext" >Retour</div>
</div>
<div class="qrcode" >
<img src="img/qr_code.jpg" alt="" class="imgqr" >
</div>                                                                                                               <!--FIN DU MODE VERSO-->
</div>
</div>
</body>
</html>

尝试使用max-width而不是width。最大宽度有助于根据设备大小更改大小。

例：

.verso{
width:100%;
max-width: 370px;                                                       
margin-bottom: 0px;
}

感谢您的帮助，不幸的是它没有改变任何东西。我可以发布自己的图像，它在我的手机上提供火狐和铬。

火狐和铬上的移动版本

野生动物园上的移动版

我有时会花钱搜索这个，我发现了一些东西，我希望它有所帮助： 查看链接 ： https://dev.to/neshaz/how-to-make-all-browsers-understand-your-css-2a4e

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium