javascript - 如果用户使用手机，隐藏某些元素，提供按钮使元素重新出现

Question

摘要:我正在尝试设计餐厅菜单。当在桌面上查看该网站时，用户应该看到整个菜单，即类别(“开胃菜”)以及该类别中的所有食物条目(“炸鱿鱼”、“马苏里拉奶酪棒”等)。但是，当在移动设备上查看时，我希望隐藏条目并将食物类别设为按钮。单击“开胃菜”按钮时，用户应该会看到“炸鱿鱼”、“马苏里拉奶酪棒”等。我觉得我将以一种复杂的方式实现这一点。我的代码:

index.html:

<div class="food-section-heading" id="appetizers">Appetizers</div>
<div class="menu-item">
   Fried Calamari
</div>
<div class="menu-item">
   Mozzarella Sticks
</div>

使用 javascript 隐藏通常存在的内容并显示按钮:

/* Function definitions */
function hideElements(className){
  elements = document.getElementsByClassName(className);
  for(i = 0; i < elements.length; i++){
    elements[i].style.display = 'none';
  }}

function showElements(className, displayType){
  elements = document.getElementsByClassName(className);
  for(i = 0; i < elements.length; i++){
    elements[i].style.display = displayType;
  }}

/* Main Program */

//if iPhone X or smaller hide '.menu-item' elements
if(window.screen.availWidth <= 375){
   hideElements('food-section-heading')
   hideElements('menu-item');
}
/* Code to create button and show elements upon click event not included. I stopped writing it and came here because I feel I can't be doing this right*/

有没有更简单的方法来解决这个问题？ (我所说的一个很好的例子是移动设备上的 grubhub.com 与桌面上的 grubhub.com 的比较。)

Answer 1

有多种方法可以在不同设备上以不同方式显示同一文档。

当定位台式机/笔记本电脑/平板电脑/移动设备时，通常的起点是选择是否要检测:

• 浏览器视口(viewport)大小/视口(viewport)方向/设备屏幕大小；或
• 浏览器品牌和版本；或
• 与浏览器触摸功能相关的数据

然后，您可以使用:

• CSS @media 查询(常用于响应式设计)
• 客户端浏览器嗅探(通过 JavaScript)
• 服务器端浏览器嗅探(用于RESS/服务器端响应)
• 触摸检测(同样通过 JavaScript)

还有更多。

<小时/>

通过 CSS @media 查询屏幕尺寸来定位

更容易实现的方法之一是部署一个或多个 CSS @media 查询。

这是一个简单的 @media 查询，目标是 屏幕尺寸，宽度为 800px 或更窄:

@media only screen and (max-width: 800px) {

  .menu-item {
    display: none;
  }
}

<小时/>

添加@media查询hover:hover |无

如果您想要更复杂的定位(例如，在您不想想要定位台式机/笔记本电脑上狭窄的浏览器窗口的情况下)，您可以定位屏幕尺寸(如上所述)结合检查屏幕是否支持悬停操作(如果不支持，则很可能是触摸屏):

@media only screen and (max-width: 800px) and (hover: none) {

  .menu-item {
    display: none;
  }
}

<小时/>

使用设备大小@media查询的旧方法(不推荐)

在@media查询之前hover:hover |没有到达，如果您想要更复杂的定位，您可以使用@media查询定位实际设备尺寸:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px), 
       only screen and (min-device-width: 320px) and (max-device-width: 568px), 
       only screen and (min-device-width: 360px) and (max-device-width: 598px) {

         .menu-item {
           display: none;
         }
}

但在实践中，这往往不太有用并且更难以维护。