我正在尝试根据设备是 iPhone 还是 iPad 在不同的 div 之间切换(在同一个 html 页面上),我尝试了我能想到的所有可能的方法,但它不起作用。我想显示 nav_ipad 并且在 ipad 上打开时 nav_iphone 消失,但无论我做了什么,nav_iphone 总是显示。这是我的代码,如果可以,请帮助我,谢谢!
html代码
<nav id="nav_ipad">
<ul>
<li><a href="about.html"><b>A</b>BOUT</a></li>
<li><a href=""><b>P</b>ROCESS</a></li>
<li><a href=""><b>W</b>ORK</a></li>
<li><a href=""><b>C</b>ONTACT</a></li>
</ul>
</nav>
<nav id="nav_iphone">
<ul>
<li><a href="site/about.html"><b>A</b>BOUT</a></li>
<li><a href=""><b>W</b>ORK</a></li>
</ul>
</nav>
Javascript
if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
$('#nav_ipad').hide();
}
if(navigator.userAgent.match(/iPad/i)) {
$('#nav_iphone').hide();
// document.getElementById("nav_iphone").style.display = "none";
}
最佳答案
您应该只使用 css,顶部链接标签用于 iPhone,另一个用于 iPad
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="css/small-device.css" type="text/css" title="no title"/>
<link media="only screen and (device-width: 768px)" rel="stylesheet" href="css/ipad.css" type="text/css" title="no title"/>
然后创建 2 个 css 文件和样式:)
关于javascript - 在 iPhone 和 iPad 之间切换 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11320325/