Question

我设计了一个网站，该网站使用CSS汉堡菜单来激活滑动条，其中包含指向网站上不同网页的链接。

我还写了一个iPhone / andriod应用程序，需要一个汉堡包菜单，打开一个运行swift和android代码的滑块工作。

我想添加到网站的iphone / android汉堡包滑动链接（它有自己的汉堡包菜单）

如果它是移动设备或PC，我如何在网站上进行测试，所以如果它是移动设备，我可以关闭“网站”汉堡包，因为我已经拥有并需要移动设备上的汉堡包菜单。

我在网站上有php，所以如果它是手机，我可以删除网站上的汉堡菜单。

这是主页

<html>


<div class="w3-sidebar w3-bar-block w3-card-2 w3-animate-left" style="display:none" id="mySidebar">
<button class="w3-bar-item w3-button w3-large" onclick="w3_close()">Home</button>
<a href="menu_01_angular.php" class="w3-bar-item w3-button">Link 1</a>
<a href="#"                            class="w3-bar-item w3-button">Link 2</a>
<a href="#"                            class="w3-bar-item w3-button">Link 3</a>
</div>






<div zclass="w3-main" id="main">
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">&#9776;</button>
<div class="w3-container">
<h1>My Page</h1>
</div>

谢谢

Answer 1

所以有几种方法可以做到这一点，但一个非常简单的方法是这样的：

var width = $(window).width(); //jquery
var width = window.innerWidth; //javascript

if(width > 1000){do large screen width display)
else{handle small screen}

当然1000只是一个任意数字。它变得棘手，因为当你考虑表时，确实有各种尺寸的屏幕，所以由你来决定属于哪里

Answer 2

如果是移动设备或PC，我如何在网站上进行测试，所以我可以关闭，如果“网站”汉堡包，如果它是一个移动，

如果我理解正确，您可以使用CSS @media -rules来设置仅适用于较小设备的CSS规则。下面是CSS媒体查询的简单代码段示例。

dockedItem

CSS移动设备和汉堡菜单

2 个答案: