Home/ Questions/Q 9216063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T02:20:18+00:00

We’re using the following HTML meta tag and style query to allow us to

  • 0

We’re using the following HTML meta tag and style query to allow us to target the iPad/Safari browser (for a few minor variations in the iPad compared to windows/linux browsers):

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="style/tablet.css" />

But the tablet.css file is also being loaded on smaller laptops (ie, those with less than 1024px) – and also seems to come into play when zooming in on larger screens, too.

Using device width is not a very good way of discriminating an actual device/browser, but all my hunting on the internet says that this is the best way to do it.

Is there any other way?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You will have to revert to javascript for this

    You could either use modernizr to detect touch event support

    http://modernizr.github.com/Modernizr/touch.html

    Modernizr will add a class to the <html> tag so you can target touch supporting devices quite easy.

    Or detect the user agent with javascript if you want more accuracy, but it would need regular updating for updates and new tablet OS releases.

    • 0