mobile support not working on js api 4.x

543
4
Jump to solution
01-17-2023 04:05 AM
litch
by
New Contributor III

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

image.png

example from a live sample:

litch_0-1673957060465.png

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

litch_0-1673960171882.png

 

0 Kudos
1 Solution

Accepted Solutions
AndyGup
Esri Regular Contributor

@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">

 

View solution in original post

4 Replies
AndyGup
Esri Regular Contributor

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.

0 Kudos
litch
by
New Contributor III

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).

litch_0-1673971864920.png

 

0 Kudos
AndyGup
Esri Regular Contributor

@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
by
New Contributor III

it works! thanks @AndyGup 

0 Kudos