I'm attempting to make my web app work better on notch phones, and have been attempting to follow the advice everywhere and use the css env values, like the following one
along with
in the viewport meta.
Unfortunately, I don't have an iPhone Xs, or any phone with a notch, so I can't test it on a real device. The only options have been going to a phone shop (which is how I found out it 'needs work'), and the simulator on the new version of x code.
I've run out of the will to spend time in phone shops, and so have been concentrating on the simulator. Unfortunately, the simulator doesn't seem to provide values for those css env names - if I check them in the 'computed' part of safari's dev tools, they are 'empty', something like:
Does anyone have any ideas on how to get these values set in the simulator?
Code:
padding-left: env(safe-area-inset-left);
Code:
viewport-fit=coverUnfortunately, I don't have an iPhone Xs, or any phone with a notch, so I can't test it on a real device. The only options have been going to a phone shop (which is how I found out it 'needs work'), and the simulator on the new version of x code.
I've run out of the will to spend time in phone shops, and so have been concentrating on the simulator. Unfortunately, the simulator doesn't seem to provide values for those css env names - if I check them in the 'computed' part of safari's dev tools, they are 'empty', something like:
Code:
padding-left: ;
safe-area-inset-bottom: ;Does anyone have any ideas on how to get these values set in the simulator?