[app-layout] Pixel 7 Pro app-layout-touch-optimized not working

[aetasoul]

Description

I'd like to use the bottom navbar on the mobile devices and Navbar on desktop devices, like this

With a simple copy-pase I create a Vaadin 14 project to test this on my mobile (Google Pixel 7 Pro and on Iphone 12 Pro).

On the iphone all is working but on the pixel the app-layout always show on top like the desktop device.

Checking the vaadin-app-layout.js file I found the media query:

@media (pointer: coarse) and (max-width: 800px) and (min-height: 500px) {
        :host {
          --vaadin-app-layout-touch-optimized: true;
        }
      }

updating this fixed the problem, to:

@media (pointer: fine),(pointer: coarse) and (max-width: 800px) and (min-height: 500px) {
        :host {
          --vaadin-app-layout-touch-optimized: true;
        }
      }

seems that the pixel is recognized as desktop device?

Expected outcome

I expect the navbar to correctly move to the bottom also on the pixel 7 pro.

Minimal reproducible example

Example:

package com.vaadin.demo.component.applayout;

import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.component.tabs.TabsVariant;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouterLink;

@Route("app-layout-bottom-navbar")
public class AppLayoutBottomNavbar extends AppLayout {

  public AppLayoutBottomNavbar() {
    H1 title = new H1("MyApp");
    title.getStyle()
      .set("font-size", "var(--lumo-font-size-l)")
      .set("margin", "var(--lumo-space-m) var(--lumo-space-l)");

    Tabs tabs = getTabs();

    H2 viewTitle = new H2("View title");
    Paragraph viewContent = new Paragraph("View content");

    Div content = new Div();
    content.add(viewTitle, viewContent);

    addToNavbar(title);
    addToNavbar(true, tabs);

    setContent(content);
  }

  private Tabs getTabs() {
    Tabs tabs = new Tabs();
    tabs.add(
      createTab(VaadinIcon.DASHBOARD, "Dashboard"),
      createTab(VaadinIcon.CART, "Orders"),
      createTab(VaadinIcon.USER_HEART, "Customers"),
      createTab(VaadinIcon.PACKAGE, "Products")
    );
    tabs.addThemeVariants(TabsVariant.LUMO_MINIMAL, TabsVariant.LUMO_EQUAL_WIDTH_TABS);
    return tabs;
  }

  private Tab createTab(VaadinIcon viewIcon, String viewName) {
    Icon icon = viewIcon.create();
    icon.setSize("var(--lumo-icon-size-s)");
    icon.getStyle().set("margin", "auto");

    RouterLink link = new RouterLink();
    link.add(icon);
    // Demo has no routes
    // link.setRoute(viewClass.java);
    link.setTabIndex(-1);

    return new Tab(link);
  }
}

Steps to reproduce

Open the website on the phone.
Change the media query as explained above.
Open the website on the phone.

Environment

Vaadin version(s): 14.10.7
OS: Android 13

Browsers

Chrome

[aetasoul]

I don't know but maybe update the media query as:

 @media (max-width: 800px), (max-height: 600px)

will fix the problem on most devices?

This is the one used for the drawer