我想在我的网站上添加一些检测功能; 这些好选择吗？ [关闭]

Question

As I am recoding my entire website, I need to choose a couple of methods to detect both web browsers and mobile devices. From the lists below, could you please recommend the better option?

Here are my choices;

Browser Detection

• Use IE-specific comment arguments to target IE6 - IE8 CSS files; IE9+ and other browsers will use the same CSS file
• Web browser user agent string matches via PHP (not entire user agent strings!)

Mobile Device Detection

• CSS3 media queries, although this could be problematic for IE versions that don't support them, and also for detecting mobile devices with resolutions capable of displaying the full website (such as a 4.7" 1080p display, or a 7" 1080p display)
• User agent string matches via PHP (again, not entire strings!)

Ideally, I'd like all mobile devices (smartphones and tablets) to display the mobile version of the website, and be given the option to view the desktop version via a user agent switch, which I know Chrome, Firefox and Opera on Android offer (at the very least).

Thank you.

Answer 1

You should not use browser detection, but feature detection. For this, I highly recommend Modernizr.

In regards to device detection, I use PHP Mobile Detect, it works fantastically. However, most of the time you can get away with merely doing screensize detection via media queries:

@media screen and (max-width:759px){
    /* mobile CSS */
}

@media screen and (min-width:760px){
    /* browser CSS */
}

That is obviously oversimplified, you can set it to whatever sizes you want, and have multiple versions (tablet, giant screen, etc.). More information can be found here.

That said, media queries are not supported with IE8 and below, so you need to do a Javascript-based detection. If you use Modernizr, you can just detect it, replicate the screen-size CSS in a separate file, and apply that CSS file dynamically by giving your CSS link an ID:

<link rel="stylesheet" type="text/CSS" id="ApplyQueries" href="queries.css" />

And then dynamically apply the right file by screensize:

if(document.documentElement.clientWidth < 760){
    document.getElementById('ApplyQueries').href = 'mobile.css';
} else {
    document.getElementById('ApplyQueries').href = 'browser.css';
}

Again this is over-simplified, but should give you an idea of where to start.