apple-touch-startup-image validation issues

[Gabriel Torres]

Hello,

I've just ran the W3 HTML validator tool (https://validator.w3.org) here and it complained about these:

<link rel="apple-touch-startup-image" media="screen and (device-width: 568px) and (device-height: 320px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="https://www.clubedohardware.com.br/uploads/monthly_2021_06/apple-startup-1136x640.png">↩
<link rel="apple-touch-startup-image" media="screen and (device-width: 812px) and (device-height: 375px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="https://www.clubedohardware.com.br/uploads/monthly_2021_06/apple-startup-2436x1125.png">↩
<link rel="apple-touch-startup-image" media="screen and (device-width: 896px) and (device-height: 414px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="https://www.clubedohardware.com.br/uploads/monthly_2021_06/apple-startup-1792x828.png">

Quote

Bad value screen and (device-width: 568px) and (device-height: 320px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) for attribute media on element link: Deprecated media feature device-width. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

I checked and these are generated in the includeMeta template, which is unmodified in our install. I checked invisioncommunity.com and it doesn't get the same errors, because it is using apple-touch-icon instead. I don't know the difference between the two tags.

Please advise!

Cheers!

[Marc]

While I understand what you are saying there on the theme, please test this on a default unaltered theme in the first instance. It may well be that you are missing something there

[Gabriel Torres]

@Marc Stridgen same result, it generates lots of these invalid apple-touch-startup-image links.

[Gabriel Torres]

@Marc Stridgen Solved this by editing core > global > global > includeMeta and replacing device-width and device-height with width and height, respectively.

Before:

<link rel="apple-touch-startup-image" media="screen and (device-width: {expression="$image['width'] / $image['density']"}px) and (device-height: {expression="$image['height'] / $image['density']"}px) and (-webkit-device-pixel-ratio: {$image['density']}) and (orientation: {$image['orientation']})" href="{file="$image['url']" extension="core_Icons"}">

After:

<link rel="apple-touch-startup-image" media="screen and (width: {expression="$image['width'] / $image['density']"}px) and (height: {expression="$image['height'] / $image['density']"}px) and (-webkit-device-pixel-ratio: {$image['density']}) and (orientation: {$image['orientation']})" href="{file="$image['url']" extension="core_Icons"}">

This should be fixed in a coming update! 🙂

Gabe.

[Matt]

Sadly the W3C validator complains about a lot of things we have to do in the real world.

The markup you are seeing is a well known workaround for limitations in how iOS manages start up images across its wide range of screen sizes and devices.

https://appsco.pe/developer/splash-screens
https://www.simicart.com/blog/pwa-splash-screen/

To change device-width to just width breaks this.

It's not something we can fix.

[Gabriel Torres]

Thanks, @Matt, I will revert the changes I did here.