cordova/phonegap screen notch detection (for all phones, not only iPhone X)
I would like to integrate screen notch support for my cordova application.
However a couple months ago the iPhone X is was the only smartphone with a screen notch so the detection and solution for it was pretty easy:
(function(){
// Really basic check for the ios platform
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// Get the device pixel ratio
var ratio = window.devicePixelRatio || 1;
// Define the users device screen dimensions
var screen = {
width : window.screen.width * ratio,
height : window.screen.height * ratio
};
// iPhone X Detection
if (iOS && screen.width == 1125 && screen.height === 2436) {
alert('iPhoneX Detected!');
}
})();
I could then, with javascript, apply a top-offset of 20px so the screen notch support is complete.
However as more and more phones start using this screen notch the detection gets a lot more complicated and I don't know where to start. Does anyone have a good idea on how one would settle this problem?
As you can see below a lot of smartphone companies are starting to use the screen notch and a good app should support all devices right?
Phones with screen notch:
- Huawei P20 series
- Asus ZenFone 5 and 5Z
- Huawei Honor 10
- Oppo R15 and R15 Pro
- Oppo F7
- Vivo V9
- Vivo X21 and X21 UD
- OnePlus 6
- LG G7 ThinQ
- Leagoo S9
- Oukitel U18
- Sharp Aquos S3
- ...
javascript
android ios css cordova asked Nov 21 '18 at 12:48
SuperJordirSuperJordir
52
add a comment |
I would like to integrate screen notch support for my cordova application.
However a couple months ago the iPhone X is was the only smartphone with a screen notch so the detection and solution for it was pretty easy:
(function(){
// Really basic check for the ios platform
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// Get the device pixel ratio
var ratio = window.devicePixelRatio || 1;
// Define the users device screen dimensions
var screen = {
width : window.screen.width * ratio,
height : window.screen.height * ratio
};
// iPhone X Detection
if (iOS && screen.width == 1125 && screen.height === 2436) {
alert('iPhoneX Detected!');
}
})();
I could then, with javascript, apply a top-offset of 20px so the screen notch support is complete.
However as more and more phones start using this screen notch the detection gets a lot more complicated and I don't know where to start. Does anyone have a good idea on how one would settle this problem?
As you can see below a lot of smartphone companies are starting to use the screen notch and a good app should support all devices right?
Phones with screen notch:
- Huawei P20 series
- Asus ZenFone 5 and 5Z
- Huawei Honor 10
- Oppo R15 and R15 Pro
- Oppo F7
- Vivo V9
- Vivo X21 and X21 UD
- OnePlus 6
- LG G7 ThinQ
- Leagoo S9
- Oukitel U18
- Sharp Aquos S3
- ...
javascript
android ios css cordova asked Nov 21 '18 at 12:48
SuperJordirSuperJordir
52
add a comment |
I would like to integrate screen notch support for my cordova application.
However a couple months ago the iPhone X is was the only smartphone with a screen notch so the detection and solution for it was pretty easy:
(function(){
// Really basic check for the ios platform
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// Get the device pixel ratio
var ratio = window.devicePixelRatio || 1;
// Define the users device screen dimensions
var screen = {
width : window.screen.width * ratio,
height : window.screen.height * ratio
};
// iPhone X Detection
if (iOS && screen.width == 1125 && screen.height === 2436) {
alert('iPhoneX Detected!');
}
})();
I could then, with javascript, apply a top-offset of 20px so the screen notch support is complete.
However as more and more phones start using this screen notch the detection gets a lot more complicated and I don't know where to start. Does anyone have a good idea on how one would settle this problem?
As you can see below a lot of smartphone companies are starting to use the screen notch and a good app should support all devices right?
Phones with screen notch:
- Huawei P20 series
- Asus ZenFone 5 and 5Z
- Huawei Honor 10
- Oppo R15 and R15 Pro
- Oppo F7
- Vivo V9
- Vivo X21 and X21 UD
- OnePlus 6
- LG G7 ThinQ
- Leagoo S9
- Oukitel U18
- Sharp Aquos S3
- ...
javascript
android ios css cordova asked Nov 21 '18 at 12:48
SuperJordirSuperJordir
52
I would like to integrate screen notch support for my cordova application.
However a couple months ago the iPhone X is was the only smartphone with a screen notch so the detection and solution for it was pretty easy:
(function(){
// Really basic check for the ios platform
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// Get the device pixel ratio
var ratio = window.devicePixelRatio || 1;
// Define the users device screen dimensions
var screen = {
width : window.screen.width * ratio,
height : window.screen.height * ratio
};
// iPhone X Detection
if (iOS && screen.width == 1125 && screen.height === 2436) {
alert('iPhoneX Detected!');
}
})();
I could then, with javascript, apply a top-offset of 20px so the screen notch support is complete.
However as more and more phones start using this screen notch the detection gets a lot more complicated and I don't know where to start. Does anyone have a good idea on how one would settle this problem?
As you can see below a lot of smartphone companies are starting to use the screen notch and a good app should support all devices right?
Phones with screen notch:
- Huawei P20 series
- Asus ZenFone 5 and 5Z
- Huawei Honor 10
- Oppo R15 and R15 Pro
- Oppo F7
- Vivo V9
- Vivo X21 and X21 UD
- OnePlus 6
- LG G7 ThinQ
- Leagoo S9
- Oukitel U18
- Sharp Aquos S3
- ...
javascript
android ios css cordova javascript
android ios css cordova asked Nov 21 '18 at 12:48
SuperJordirSuperJordir
52
asked Nov 21 '18 at 12:48
SuperJordirSuperJordir
52
asked Nov 21 '18 at 12:48
SuperJordirSuperJordir
52
asked Nov 21 '18 at 12:48
SuperJordirSuperJordir
52
asked Nov 21 '18 at 12:48
SuperJordirSuperJordir
52
52
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Your best bet to support all notch devices would be to use css "safe area", instead of trying to keep a catalogue of all devices with notches and applying your logic.
Tutorial:
https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493
I have not tried the above on an Android device, but it is supported according to MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/env
answered Nov 22 '18 at 15:44
David BriglioDavid Briglio
914
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412374%2fcordova-phonegap-screen-notch-detection-for-all-phones-not-only-iphone-x%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your best bet to support all notch devices would be to use css "safe area", instead of trying to keep a catalogue of all devices with notches and applying your logic.
Tutorial:
https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493
I have not tried the above on an Android device, but it is supported according to MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/env
answered Nov 22 '18 at 15:44
David BriglioDavid Briglio
914
add a comment |
Your best bet to support all notch devices would be to use css "safe area", instead of trying to keep a catalogue of all devices with notches and applying your logic.
Tutorial:
https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493
I have not tried the above on an Android device, but it is supported according to MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/env
answered Nov 22 '18 at 15:44
David BriglioDavid Briglio
914
add a comment |
Your best bet to support all notch devices would be to use css "safe area", instead of trying to keep a catalogue of all devices with notches and applying your logic.
Tutorial:
https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493
I have not tried the above on an Android device, but it is supported according to MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/env
answered Nov 22 '18 at 15:44
David BriglioDavid Briglio
914
Your best bet to support all notch devices would be to use css "safe area", instead of trying to keep a catalogue of all devices with notches and applying your logic.
Tutorial:
https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493
I have not tried the above on an Android device, but it is supported according to MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/env
answered Nov 22 '18 at 15:44
David BriglioDavid Briglio
914
answered Nov 22 '18 at 15:44
David BriglioDavid Briglio
914
answered Nov 22 '18 at 15:44
David BriglioDavid Briglio
914
answered Nov 22 '18 at 15:44
David BriglioDavid Briglio
914
914
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412374%2fcordova-phonegap-screen-notch-detection-for-all-phones-not-only-iphone-x%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
