时间戳

首页 > 解决方案 > 为什么移动浏览器不支持我的 CSS？

html - 为什么移动浏览器不支持我的 CSS？

问题描述

大家好，大家好，

我是一名初级开发人员，如果我在一个主题上苦苦挣扎，这将是将近两周的时间。我的代码适用于桌面版本和所有浏览器（Chrome、EI、Firefox、Edge）。另一方面，当我想在移动设备上查看我的页面时，一切都在 safari 上运行良好，但对于 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>

标签： htmlcssmobilebrowser

解决方案

感谢您的帮助，不幸的是它没有改变任何东西。我可以使用 Firefox 和 chrome 在我的手机上发布它自己的图像。

Firefox 和 chrome 上的移动版本

Safari上的移动版本

推荐阅读