Erkennung mobiler Geräte-Browser, nicht nur Bildschirm-Breite

Ich weiß, dass ich aktivieren kann einige styling-mit media query so:

/* Magic for mobile devices */
@media (max-width: 33em ) 
{
}

aber ich weiß wirklich nicht wie dieser Ansatz, da es prüft nur gegen die Bildschirmbreite.
Ich fand diese java script code für die Erkennung von mobilen Browsern und jetzt brauche ich die gleiche Prüfung mit CSS

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
        //some code..
}

Gibt es eine CSS äquivalent dieser js?

  • Wie definieren Sie "mobile"? Was über 7", 10" oder 20" - Tabletten?
  • Das ist, warum ich bin diese Frage zu stellen. Derzeit @media bietet einen check gegen die Bildschirmbreite. Was, wenn es ein 17" tablet und 17" PC Bildschirm. Ich möchte die mobile version meiner CSS auf der tablet-und der desktop-version auf dem PC. Wenn es eine CSS-check gegen mobile Browser dies ermöglicht es mir, zeigen die entsprechenden Stile.
  • Das ist mein Punkt. Sie wahrscheinlich nicht tun sollten, dass in den ersten Platz. Warum ist die mobile version besser geeignet?
  • Denn wenn Sie mit tablet-benutzen Sie Ihre Finger, um klicken Sie auf eine Schaltfläche, so dass für den Benutzer wäre besser, haben größere Tasten. Egal, ob er mit 17" tablet-oder 7" - noch berühren Sie die Schaltfläche.
  • Was ist mit Windows-8-touch-desktops & convertible-laptops?
  • stucox.com/blog/you-cant-detect-a-touchscreen
  • Yep, Sie haben Recht über Windows 8-touch-desktops, ich werde haben Sie einen Blick auf diese Artikel.

InformationsquelleAutor Anton Belev | 2013-08-13
  1. 4

    Könnten Sie Folgendes verwenden:

    <link rel="stylesheet" type="text/css" href="mobile.css" media="handheld">

    Diese richten sich an kleine oder handheld-Geräte.

    • Ich bin mit ASP.NET Themen, so das nur die CSS-Referenz ist für Jquery Mobile CSS. Wie kann ich Ihre Antwort zu meinem Fall?
    • Sorry, ich weiß es nicht, ich bin nicht familiair mit asp.net. Aber das, was Sie fordern, ist eine andere Frage, so ist es am besten, einen neuen post für das.
    • Sie können eine media query, z.B.: @media handheld { .myclass {width: 300px;} }
    InformationsquelleAutor koningdavid
Schreibe einen Kommentar