How to prepare my website for the new  iPhone X?

[Matus]

I noticed that my website isn't covering the whole screen on iPhone X.
I found this solution:

1. Find a <meta name="viewport" content="width=device-width, initial-scale=1">
2. Replace it with <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

How can I replace this code the right way in Genesis Framework? Will there be update in the future or is this WordPress problem?

https://akouspesne.sk

[Victor Font]

Genesis has a filter you can add to functions.php:

add_filter( 'genesis_viewport_value', 'iphonex_viewport' );
function iphonex_viewport( $content ){
    return "width=device-width, initial-scale=1, viewport-fit=cover";
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[RavenManiac]

Victor, do you know if the code you posted will eventually end up in a updated version of the Genesis framework?

[Victor Font]

I have no idea. I’m just a community volunteer and have no affiliation with Studio Press. I don’t know why they would though because the filter already exists so you can add whatever you want to the viewport meta tag. The fix mentioned in the first post is for one browser on one phone to work around a specific issue caused by the iPhone X notch. It is only supported by mobile Safari.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[detroitwidget]

Interesting.

Victor - Where did you find this filter?

[Victor Font]

The filter is in the code that generates the viewport meta tag. It's in genesis/lib/structure/header.php.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[detroitwidget]

Thanks.

[Author]

Posts