iPhone XR / XS / XS Max CSS media queries

Handling the Notch on iPhone X / XR / XS / XS Max OR iPhone media queries for responsive design  -

Media queries are very useful to modify your website or hybrid apps depending on a device resolution/type. This is very important to manage resolution in different devices. It help us to present batter view of app/website to users. Below are the examples for iPhone XR / XS / XS Max CSS media queries -


/* Apple iPhone XR 1792x828px at 326ppi Media Queries */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) { }

/* Apple iPhone XS 2436x1125px at 458ppi Media Queries */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

/* Apple iPhone XS Max 2688x1242px at 458ppi Media Queries */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3) { }


Below are the examples for iPhone X / 8 / 8 Plus CSS media queries -

/* Apple iPhone X Media Queries */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

/* Apple iPhone 8 Media Queries */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) { }

/* Apple iPhone 8 Plus Media Queries */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3) { }



Note : If you are looking for a specific orientation. Follow below rules -

For portrait orientation add below rule :

    and (orientation : portrait) 


For landscape orientation add below rule :

    and (orientation : landscape) 



Now use above media query in your project. It helps me a lot. If you have any query please post in a comment. 

For other all Media Queries please check this link - https://allexperts16.blogspot.com/2018/06/media-queries-for-standard-devices.html

It has Media Queries for - iPads, iPad 3, iPhone 4, iPhone 5, iPhone 6, iPhone 6+, Samsung Galaxy S3, Samsung Galaxy S4, Samsung Galaxy S5, and many more. 

How to remove white space from iPhone X in ionic / Cordova

Hey all,

Please check below image in this you can find this issue -

Finally, I found the solution to this problem. It saves a lot of time. Now UI is proper of my app. Please run below command in your project -

First uninstall "statusbar" old version plugin by using this command -

$ ionic cordova plugin rm cordova-plugin-statusbar

Now add the new version of this plugin by using this command -

$ ionic cordova plugin add cordova-plugin-statusbar

$ npm install --save @ionic-native/status-bar

Basically, what we did, We just removed the plugin and added new updated plugin of "Status Bar". This solves my problem. Please check this image -

Steps for ionic soluion :

$ ionic cordova plugin rm cordova-plugin-statusbar

$ ionic cordova plugin add cordova-plugin-statusbar

$ npm install --save @ionic-native/status-bar

Steps for Cordova solution :

$ cordova plugin rm cordova-plugin-statusbar

$ cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

How to generate APNS certificate for iOS Push Notifications

APNS (Apple Push Notification Service) is a platform service which is created by Apple Inc. This service enables developers to send push notifications in iOS devices. For this, you must have a Paid Apple Developer. Please follow below steps to create .p12 certificate require to send push notifications -


1. First login in your apple developer account by using this URL: https://developer.apple.com/account/

2. Now select "Certificates" from the left menu. Click on the "+" button from the right.

3. Now select “Apple Push Notification service SSL (Production)” and click “Continue” button -

4. Now, select the app ID from Drop down list and click on “Continue” -

5. Now we need to create CSR. To create CSR follow the steps under “About Creating a Certificate Signing Request (CSR)” -

6. Now upload ".certSigningRequest" file which you have generated (in Step 5), then click on "Generate" button -

7. Now click on "Done" to finish the registration process, The page will be refreshed and you will able to see the download option for this -

After downloading the certificate just double click on downloaded file. This will add the certificate in your keychain access. 

8. Now open “Keychain” in your system, look for the certificate you have just installed in step 7. If you are not sure which certificate that was - That should start with “Apple Production IOS Push Services” and followed by app’s bundle ID.

9. Now, Expand the certificate, you should able to see the private key with your name or your company name. Select both items by using the "Select" key on your keyboard. Now right click and choose “Export 2 items” -

Then save this p12 file with a valid name like "pushcert.p12" to your Desktop. Now you will be prompted to enter a password to protect this p12 file, You can select skip the password or enter a password option.

10. Now open the terminal and move in your directory where you have this p12 file. Run below command to generate pem file -

openssl pkcs12 -in pushcert.p12 -out pushcerts.pem -nodes -clcerts