为什么此页面在移动设备上无法显示，但在台式机或移动设备上却无法显示Chrome检查器

时间：2019-02-20 17:17:45

标签： html css mobile

在使用Chrome开发工具的桌面上-使用Chrome检查器的无分页符桌面

No page break desktop with Chrome inspector

在移动iPhone 7和Android上

On Mobile iPhone 7 and Android

此代码在移动设备上引起了两种不同的视图和分页符，但在桌面视图上没有。

header {
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 100px;
    width: 100%;
    background-color: #1C2E47;
}

video {
	max-width: 100%;
	height: auto;
}

.wrapper {
    display: block;
    margin: auto;
    text-align: center;

}

.drivers {
    flex-direction: row;
    margin-top:-10%;
    padding:10%;
  /*   margin-top: 5%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    justify-content: space-between;
}

h1, h2 {
    font-family: 'Montserrat', sans-serif;
}

h3 {
    font-size: 1rem;
}

.deviceBadge {
    margin-top: 50px;
}

.badge h3 {
    margin: 0;
}

.badge img {
    width: 250px;
    display: flex;
    margin: 30px;
}


.downloadBtn {
    background: #79c62d;
    color: white;
    width: 55%;
    display: inline-block;
    text-align: center;
    font-size: 1rem;
    padding: 8px 6px;
    border-radius: 4px;
    border-bottom: 2px solid green;
    margin-top: 12px;
}

.mainHead {
    text-align: center;
}

.headLine {
    background: #000;
    height: 3px;
    width:100%;
}

.headLineShort {
    background: #000;
    height: 3px;
    width:100%;
    margin-top: 80px;
}

.subHeader {
    margin-top:80px;
}

.add {
    color:black;
    font-weight: 800;
}

.appleNote {
    color: tomato;
    text-align: center;
    font-weight: 300;
    width:60%;
}

.appleNote2 {
    font-weight: 500;
}

.headerNav {
    width: 80%;
    display: flex;
    justify-content: space-between;
}

.headerLogo img {
    margin-left:10%;
    width: 170px;
    padding: 20px;
    margin-top:10px;
}

.headerSocialIcon {
    padding: 20px;
    display: flex;
    flex-direction: row;
    /* padding-right:40px; */
}

.headerSocialIcon a {
    padding:0 11px;
    font-size: 1.6rem;
    margin-top:20px;
    color:white;
}



.macDriver img {
    width: 100px;
    margin-top: 100px;
}

.androidDriver img {
    width: 100px;
    margin-top:100px;
}

.wifiDriver img {
    width: 100px;
    margin-top:100px;
}

.wifiParent {
    display: flex;
    justify-content: center;
}

.wifiChild {
    flex-direction: row;
}


@media screen and (max-width: 800px) {
    .wifiParent {
        flex-direction: column;
    }    
}

.driverHeading {
    display: flex;
}

.driverChild {
    display: flex;
    flex-direction: row;
}



.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mainFooter {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:\201C \201D \2018 \2019;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,html input[type=button],/* 1 */input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,figure{margin:0;}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: ''; clear: both; height: 0; }

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--  <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat|Nunito+Sans:400,700,800i,900" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
        integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <link rel="stylesheet" href="Styles/style.css">
    <title>Endosnake Drivers and How To Guides</title>
</head>
<body>

<header><!-- HEADER NAV BAR STARTS -->
    <center><div class="headerNav">
        <div class="headerLogo">
            <img src="https://cdn.shopify.com/s/files/1/0020/1542/8674/files/endosnake_white.png" alt="">
        </div>

        <div class="headerSocialIcon">
            <a target="_blank" href="https://www.facebook.com/endosnake/"><i class="fab fa-facebook-square"></i></a>
            <a target="_blank" href="https://www.instagram.com/endosnake/"><i class="fab fa-instagram"></i></a>
            <a target="_blank" href="mailto:value@valuegearonline.com"><i class="fas fa-envelope-square"></i></a>
        </div>
    </div></center>
</header><!-- HEADER NAV BAR ENDS -->

<main> <!-- MAIN START -->

    <div class="wrapper">

       

        <div class="drivers">

            <h1 class="mainHead">How To Use The Endosnake</h1>
            <div class="headLine"></div>

            <div>
                <div class="deviceBadge">
                <h2>Pick Your Mobile Device</h2>        
                    <center>
                        <div class="badge">

                            <h3>Android</h3>
                            <a href="https://play.google.com/store/apps/details?id=com.vaultmicro.camerafi"><img src="https://www.kacavida.al/wp-content/uploads/2018/12/Android-app-on-google-play.svg-copy.png" alt="android download badge"></a>

                            <h3>Apple</h3>
                            <a href="https://itunes.apple.com/us/app/moqo-view/id1187576691?mt=8"><img src="https://www.imro.ie/wp-content/uploads/2017/09/app-store-image.png" alt="apple download badge"></a>
                        </div>
                    </center>
                </div>

                <center>
                    <h3 class="appleNote"><span class="add">Additional Note:</span> Apple Devices will require the <a href="#"> Wifi Adapter (not included - $24.99)</a> to be able to connect with the Endosnake™️.</h3> 
                <!--     <h3 class="appleNote2">Currently only Wifi is available on Apple Devices. Bluetooth not supported.</h3> -->
                </center>
            </div>

            <div class="headLineShort"></div>

            <h2 class="subHeader">More App Options With Video Instructions Listed Below</h2>

            <div class="androidDriver">
                <!-- ANDROID STARTS -->
                <img src="https://cdn4.iconfinder.com/data/icons/smart-phones-technologies/512/android-phone.png" alt="">
                <h2>Using Endosnake on the Android</h2>
                <div class="iframe-container">
                    <iframe width="1191" height="670" src="https://www.youtube.com/embed/FdemllizlRk" frameborder="0"
                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                <!-- <a class="downloadBtn" href="http://www.kkmoom.com/an97.apk">Kmoon - Download Now [Android]</a> -->
            
                <a class="downloadBtn" href=" https://play.google.com/store/apps/details?id=com.vaultmicro.camerafi">CameraFi -
                    Download Now [Android]</a>
            </div>


            <div class="wifiDriver">
                <!-- WIFI STARTS -->
                <img src="https://cdn0.iconfinder.com/data/icons/thin-servers-databases/57/thin-422_wireless_wifi_signal_hotspot-512.png"
                    alt="">
                <h2>Use Endosnake With Any WiFi Camera App</h2>
                <div class="iframe-container">
            
                    <iframe width="1191" height="670" src="https://www.youtube.com/embed/V_FcDqgk0IQ" frameborder="0"
                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                

                <div class="wifiParent">


                    <div class="wifiChild">
                        
                        <!-- Moqo -->
                        <h3>Moqo Wifi App for Apple and Android</h3>

                        <a class="downloadBtn" href="https://itunes.apple.com/us/app/moqo-view/id1187576691?mt=8">Moqo - Download Now
                            [Apple]</a>
                        
                        <a class="downloadBtn" href="https://play.google.com/store/apps/details?id=com.xbcmmoqo2">Moqo -
                            Download Now [Android]</a>

                        <!-- Wifi Look -->
                        <h3>Wifi Look App for Apple and Android</h3>
                        
                        <a class="downloadBtn" href="https://itunes.apple.com/us/app/wifi-look/id1275018170?mt=8">Wifi Look - Download Now
                            [Apple]</a>
                        
                        <a class="downloadBtn" href="https://play.google.com/store/apps/details?id=com.molink.john.wifiviewer">Wifi Look -
                            Download
                            Now [Android]</a>

                        
                    </div>

                    <div class="wifiChild">
                        <strike><h3>Mo-View Wifi App for Apple and Android</h3></strike>
                    
                        <!-- Mo-View -->
                        <a class="downloadBtn" href="https://itunes.apple.com/us/app/mo-view/id1209745044?mt=8">Mo-View - Download Now
                            [Apple]</a>
                    
                        <a class="downloadBtn" href="https://play.google.com/store/apps/details?id=com.tony.molink.moview&hl=en">Mo-View -
                            Download
                            Now [Android]</a>

                        <!-- HD Scope -->
                        <strike><h3>HD Scope App for Apple and Android</h3></strike>
                        
                        <a class="downloadBtn" href="https://itunes.apple.com/us/app/hd-scope/id1345769789?mt=8">HD Scope - Download Now
                            [Apple]</a>
                        
                        <a class="downloadBtn" href="https://play.google.com/store/apps/details?id=cn.com.buildwin.HDScope">HD Scope -
                            Download Now [Android]</a>

                    </div>
                    
                    
                </div>

            </div>

            <div class="androidDriver"><!-- PC STARTS -->
                <img src="https://cdn1.iconfinder.com/data/icons/squared/64/monitor-pc-windows-512.png" alt="">
                <h2>Using Endosnake on the PC</h2>
                <div class="iframe-container">
                    <iframe width="1191" height="670" src="https://www.youtube.com/embed/uKxjx1QHhJM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen></iframe>
                </div>

                <a class="downloadBtn" href="https://drive.google.com/open?id=0ByYr6EPeFjbQZkZzNHZ5Y25ScXM">AMcap - Download
                    Now [PC]</a>
                <a class="downloadBtn" href="https://www.bandicam.com/downloads/">Bandicam - Download
                    Now [PC]</a>

                <a class="downloadBtn" href="http://www.hdv-cctv.com/images/app/viewplaycap.rar">ViewPlay - Download
                    Now [PC]</a>



                    
            </div>


            <div class="macDriver">
                <!-- MAC STARTS -->
                <img src="https://cdn0.iconfinder.com/data/icons/mobile-development-svg-icons/60/Apple_PC-512.png" alt="">
                <h2>Using Endosnake on the Mac</h2>
                <div class="iframe-container">
                    <iframe class="video" width="1191" height="670" src="https://www.youtube.com/embed/ErhqX5cbJHk" frameborder="0"
                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                <a class="downloadBtn" href="https://support.apple.com/kb/DL923?locale=en_US">Quicktime - Download
                    Now [Mac]</a>
            </div>



            
        </div>
    </div>

</main> <!-- MAIN END -->

<footer class="mainFooter">
    <h3><a href="https://valuegearonline.com/pages/contact-us">Contacts</a>|</h3>
    <h3><a href="https://valuegearonline.com/pages/privacy-policy">Privacy</a>|</h3>
    <h3> <a href="https://valuegearonline.com/pages/terms-of-service">Terms of Service</a></h3>
</footer>

</body>
</html>

0 个答案:

没有答案
相关问题
最新问题