Jump to content

apple-touch-startup-image validation issues


Gabriel Torres
 Share

Recommended Posts

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!

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...