CSS移動設備和漢堡菜單

我設計了一個網站，該網站使用CSS漢堡包菜單來激活帶有指向網站上不同網頁鏈接的滑塊。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>

感謝

來源

2017-08-26 Jimmy

這就是所謂的敏感和可以實現，使用[CSS @media查詢（https://www.w3schools.com/cssref/css3_pr_mediaquery.asp） –

所以有這樣做的幾種方法，但一個非常簡單的一個是這樣的：當然

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

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

1000只是一個任意數字。它會變得棘手，因爲當你考慮表格時，真的有所有尺寸的屏幕，所以它取決於你決定什麼屬於哪裏

來源

2017-08-26 16:13:54

如果手頭的任務需要隱藏從HTML元素查看，爲什麼你會使用JS/jQ而不是CSS媒體查詢？ – user6003859

這也是另一個有效的解決方案。這可能是更好的解決方案，這樣你就不會用隱藏的元素填充dom，但這確實不是問題。他可能也希望能夠在移動設備和桌面設備上運行不同的代碼，這只是給了他另一種選擇。 –

如何測試網站，如果它是移動設備或PC，所以我如果它的移動可以關閉，如果「網站」漢堡包，

如果我理解正確的話，你可以使用CSS @media -rules，到只適用於較小的設備設置CSS規則。以下是CSS媒體查詢的簡單代碼片段示例。

@media (min-width: 700px), handheld 
{ 
    .w3-sidebar 
    { 
     display: none; 
    } 
}

來源

2017-08-26 16:20:26 user6003859

CSS移動設備和漢堡菜單

回答

相關問題