Okienko Meta TYLKO dla telefonów?

Czy istnieje sposób, aby ustawić ogólną responsywną rzutnię meta() tylko dla telefonów? Mamy stronę internetową, która bez tego znacznika meta, pomniejszona, wygląda dobrze na 7-calowych i większych tabletach, portretach i pejzażu, ale na mniejszych urządzeniach była nieco zbyt niewygodnaOkienko Meta TYLKO dla telefonów?

Aby to działało, tak jak chcieliśmy na telefonach musiałem użyć tagu <meta name="viewport">, który zmusił niektóre zapytania do multimediów do naprawienia rzeczy na większych urządzeniach.

Czy istnieje sposób na ustawienie tego tagu meta na telefonach i po prostu domyślny widok powiększonego urządzenia na większym urządzeniu urządzenia?

Dzięki! Rich

Źródło

2013-08-08 user1050887

Czy masz na myśli to <meta name="viewport">?

<meta name="viewport" content="width=device-width, user-scalable=no" />

Jeśli tak, spróbuj poniższy skrypt dodaną w <head> (podjęte i zaadaptowane z here):

if(navigator.userAgent.match(/Android/i) 
    || navigator.userAgent.match(/webOS/i) 
    || navigator.userAgent.match(/iPhone/i) 
    || navigator.userAgent.match(/iPad/i) 
    || navigator.userAgent.match(/iPod/i) 
    || navigator.userAgent.match(/BlackBerry/i) 
    || navigator.userAgent.match(/Windows Phone/i)) { 
    document.write('<meta name="viewport" content="width=device-width, user-scalable=no" />'); 
}

to wykryje, czy użytkownik-agent oznacza, że przeglądarka jest mobilny i będzie napisz, że meta widok jest wymagany.

Źródło

2013-08-08 21:25:12

idealne, dziękuję! – user1050887

Jeśli moja odpowiedź pomogła, zagłosuj na niego i zaznacz jako odpowiedź, klikając znak po lewej stronie. Dzięki temu inni ludzie wiedzą, że na twoje pytanie udzielono odpowiedzi i zarówno ty, jak i ja zyskujemy reputację. Wszyscy wygrywają! –

To nie odpowiada na pytanie, prawda? Będzie to nadal dotyczyć iPadów i tabletów z Androidem. – AlexTazh

Aby to osiągnąć, nie używaj znacznika <meta> i nie używaj zapytań @media wewnątrz ogólnego pliku .css.

Zamiast korzystać z tego rodzaju tag:

<link rel="stylesheet" media="only screen and (max-device-width: 320px)" href="wp-content/themes/thestory/css/320.css">

I tworzyć style dla tych urządzeń w oddzielnym pliku .css (jak 320.css w tym przykładzie).

Źródło

2016-01-04 12:27:17 AlexTazh

To może być lepsze rozwiązanie: Dodaj skrypt po tagu meta viewport, który zmieni wartość, jeśli ekran jest większy niż podany.

<meta id="testViewport" name=viewport content="width=device-width, initial-scale=1"> 
<script> 
if (screen.width > 590) { 
    var mvp = document.getElementById('testViewport'); 
    mvp.setAttribute('content','width=980'); 
} 
</script>

Mogą istnieć odmiany tego skryptu. Na przykład można ustawić rzeczywistą szerokość ekranu jako rzutnię zamiast stałej wartości.

Źródło

2016-01-04 15:45:55 AlexTazh

Odpowiedz

Powiązane problemy