nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

mobile support not working on js api 4.x

litch

hey, I'm using the esri github "js-api-resources" to kickstart creating a new app.

the photo is an unchanged build but the mobile support is missing(?).

the web-samples and live builds seem to work (same css). anything im missing or should change? this is the webpack sample "straight out of the box".

example from a the build after running(not supported):
npm i

and

npm run start

example from a live sample:

example from the esm-cdn folder(and what i expected to get):

Find more posts tagged with

Accepted answers

AndyGup

@litchokay we were able to reproduce this, it's because the webpack sample doesn't set the HTML viewport.

In the webpack sample under /public/index.html try add this:

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

All comments

litch

it works! thanks @AndyGup

AndyGup

@litchokay we were able to reproduce this, it's because the webpack sample doesn't set the HTML viewport.

In the webpack sample under /public/index.html try add this:

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

litch

hi @AndyGup ,

the screenshot is just an example, the problem persists in every mode,

when working from the webpack build mobile support is non-existent.

heres a side to side of webpack and the esm-cdn folder:
both should hold the same code and look the same unsimulated,

i tested examples on a production server too, the problem is happening on the phone (non simulated).

AndyGup

Hi @litch I'm unable to determine what's going on from the screen shots. Are all three screenshots taken using the iPhone 12 Pro simulator mode? That phone has a native resolution of 2532 x 1170 at 460ppi which can make UI elements look really small when running in simulation mode in a desktop browser.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.