Question

我有一些onMouseOver功能在移动设备上效果不佳。我可以在移动设备上显示不同的DIV吗？

这是对您的建议的延迟回复。基本上，如果显示器是移动的，我想要一个单独的DIV（没有onMouseOver）。

<!-- services -->
    <section class="services" id="services">
            <div class="container ptb">

                <div class="row">
                    <h2 class="centered mb"><b>SERVICES</b></h2>
                </div> <!-- Services Headline -->

<img src="assets/img/services-flip.png" height="50%" width="50%"
    onMouseOver="this.src='assets/img/services-list.png'"
    onMouseOut="this.src='assets/img/services-flip.png'" />

            </div> <!-- Content, Image -->
    </section>
<!-- end services -->

Answer 1

Media queries是你的朋友。

示例：

@media screen and (max-width: 768px) {
  div.mobile { display: block; }
  div.desktop { display: none; }
}

Answer 2

除了媒体查询，您还可以使用以下内容：http://detectmobilebrowsers.com/

基本上你可以包含这样的脚本，并做这样的事情：

$(document).ready(function(){
    if(jQuery.browser.mobile) {
      $('body').addClass('mobile');
    }
});

根据身体类＆＃34;移动＆＃34;，隐藏/显示必要的div。（这是jQuery示例，但您也可以使用普通JS来实现）

Answer 3

当然可以。使用css的CSS媒体查询这是苹果产品屏幕尺寸的绝佳参考。 http://stephen.io/mediaqueries/#iPhone

div{
  width: 100%;
  height:100%;
  padding: 0;
  margin:0;
  left:0;
  left:0;
}

 #desktopView{
   background:rgb(50,50,80);
   display:block;
  }
  #mobileView{
    background:rgb(50,80,50);
    display:none;
  }
  #mobileLandscapeView{
    display:none;
    background:rgb(80,50,50);
  }


/* iPhone 6 in portrait & landscape */ 
@media only screen and (min-device-width : 375px) and (max-device-width : 667px){ 

  /* where you can hide unwanted DIV and show a special MOBILE DIV if desired */ 

  #desktopView{
    background:rgb(50,50,80);
    display:none;
  }
  #mobileView{
    background:rgb(50,80,50);
    display:block;  
  }
  #mobileLandscapeView{
    background:rgb(80,50,50);
    display:none;
  }

}

/* iPhone 6 in landscape */ 
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) { 

   /* where you can hide unwanted DIV and show a special MOBILE DIV if desired */ 

  #desktopView{
    display:none;
  }
  #mobileView{
    display:none;  
  }
  #mobileLandscapeView{
    display:block;
  }

}

<div id="desktopView">Should see in desktop mode</div>
<div id="mobileView">Should see in iPhone 6 vertical mode</div>
<div id="mobileLandscapeView">Should see in iPhone 6 landscape mode</div>

显示移动设备的不同DIV

3 个答案: