个人中心
gpt4 book ai didi

jquery - 100% DIV 不拉伸(stretch) iphone 3gs 和 4

转载 作者：行者123 更新时间：2023-11-28 12:24:31 26 4
gpt4 key购买 nike

我在设置为 100% 的 div 时遇到了重大问题。它在桌面上显示良好，但 iphones 右侧有一个间隙，我已经尝试过

body
 { 
min-width:980px;
background-color: #fff;

我已经尝试了一些我在互联网上找到的其他修复程序，但仍然无法正常工作。

我正在使用 idangero swiper，这是我第一次使用它，所以我不确定这是否是罪魁祸首，但它在 iphone 上确实显示正常，但 div 却没有。

这是CSS

    #welcome{ 
width: 100%;
height: 256px;
background-color: #1e2f3f;
}

这是刷卡器的代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>

      <link rel="stylesheet" href="idangerous.swiper.css">
        <script src="idangerous.swiper.js"></script>    


        <script type="text/javascript">
        /*======
        Use document ready or window load events
        For example:
        With jQuery: $(function() { ...code here... })
        Or window.onload = function() { ...code here ...}
        Or document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)
        =======*/

        window.onload = function() {
          var mySwiper = new Swiper('.swiper-container',{
            //Your options here:
            mode:'horizontal',
            loop: true
            //etc..
          });  
        }


        </script>




  <style>


  .device {
    width: 980px;
    height: 528px;
    padding: 30px 40px;
    border-radius: 20px;
    background: #111;
    border: 3px solid white;
    margin: 5px auto;
    position: relative;
    box-shadow: 0px 0px 5px #000;
    margin: 0 auto;
  }
  .device .arrow-left {
    background: url(images/arrows.png); no-repeat left top;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -15px;
    width: 17px;
    height: 30px;
  }
  .device .arrow-right {
    background: url(images/arrows.png) no-repeat left bottom;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -15px;
    width: 17px;
    height: 30px;
  }
  </style>  



  </head>




    <body>









  <div class="device">
  <a class="arrow-left" href="#"></a> 
  <a class="arrow-right" href="#"></a>
  <div class="swiper-container">
    <div class="swiper-wrapper">

        <div class="swiper-slide"> 
           <img src="images/slide1.png"/>
        </div>

        <!--Second Slide-->
        <div class="swiper-slide">
          <img src="images/slide2.jpg"/>
        </div>

        <!--Third Slide-->
        <div class="swiper-slide"> 
          <a href="http://www.lbbacchus.com"><img src="images/slide4.jpg" alt=""/></a>        </div>
        <!--Etc..-->
    </div>


  </div>



    <div class="pagination"></div>


    </div>

    <script>
    var mySwiper = new Swiper('.swiper-container',{
      pagination: '.pagination',
      loop:true,
      grabCursor: true,
      paginationClickable: true
    })
    $('.arrow-left').on('click', function(e){
      e.preventDefault()
      mySwiper.swipePrev()
    })
    $('.arrow-right').on('click', function(e){
      e.preventDefault()
      mySwiper.swipeNext()
    })
    </script>

非常感谢大家:)

最佳答案

您是否使用视口(viewport)元数据在设备上正确显示？ 

<meta name="viewport" content="width=device-width, user-scalable=false;" />

这个

enter image description here

将正确地安装到这里

enter image description here

当页面大于设备的屏幕大小时(虽然不使用此元，在您的情况下，min-width:980px在 body 上)，页面被缩小了，因此在右侧产生了一个空隙(因为 iPhone 宽度只有 320px，没有超过 900px!)

更多信息:https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

关于jquery - 100% DIV 不拉伸(stretch) iphone 3gs 和 4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18646324/

26 4 0
文章推荐： JavaScript 在 for 循环中创建对象
文章推荐： firefox - 仅在 Firefox 中边框半径和背景不连接
文章推荐： ios - 复选标记 Tableview Automatic make
文章推荐： ios - CBCentralManager 未连接
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com