Javascript для специфических для сервера CSS для мобильных телефонов

Мне нужно обслуживать определенные CSS для мобильных браузеров. Я не хочу обнаруживать подвижные челюсти по размеру или форме носителя. Я хотел бы сделать это, используя navigator.userAgent.match.Javascript для специфических для сервера CSS для мобильных телефонов

Вот фрагмент кода, с которым я работаю, но, похоже, не работает. Цель здесь состоит в том, что javascript обнаружил бы мобильный браузер и предоставил href для mobile.css, иначе будет обслуживать обычный css.

<!DOCTYPE html> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta name=viewport content="width=device-width, initial-scale=1"> 
    <title>Home - Test code</title> 
    <script> 
     var text = ""; 
     if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) { 
      text = "'mobile.css'"; 
     } else { 
      text = "'screen.css'"; 
     } 
     document.getElementById('insertStyle').href=text 
    </script> 
    <link id="insertStyle" rel="stylesheet" href="null"> 
    </head>

Currenly код не работает на всех и просто оставляет HREF для таблицы стилей, как «нуль». Любые рекомендации относительно того, как я могу исправить мой код, будут высоко оценены.

источник

2017-01-24 Panopticon36

Почему у вас есть «а также». Попытайтесь удалить один из них. – Miguel

* «Я не хочу обнаруживать подвижные прорезы для мыши по размеру или форме носителя. Я хотел бы сделать это с помощью 'navigator.userAgent.match'. * * Это ваш выбор, но я буду замечать, что использование' userAgent' для этого обычно считается анти-шаблоном. –

Я думал, что ему html потребуется см. также в кавычках.Я теперь знаю, что нет необходимости указывать на javascript. Спасибо. – Panopticon36

Две вещи:

' Снимите в "'mobile.css'" и "'screen.css'". У вас есть уже текст помещается в кавычки, нет необходимости делать это дважды.
Добавить JavaScript. Прямо сейчас, когда ваш код работает, элемент не существует, поэтому вы получаете null от getElementById.

Так что-то вдоль линий:

var link = document.createElement("link"); 
link.rel = "stylesheet"; 
if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) { 
    link.href = "mobile.css"; 
} else { 
    link.href = "screen.css"; 
} 
document.getElementsByTagName("head")[0].insertChild(link);

источник

2017-01-24 14:36:30

Спасибо. 1) Теперь я вижу, что мне не нужно было дважды цитировать. Я предположил, что javascript будет выгружать переменную без кавычек и что html тоже понадобится им, таким образом, я оказался в два раза выше. 2) Я закончил тем, что просто перевел мой сценарий на место после ссылки id = "insertStyle". Теперь все выглядит хорошо. Спасибо за помощь. – Panopticon36

@ Panopticon36: Да, главное помнить, что когда вы имеете дело с DOM, вы имеете дело с объектами и свойствами, а не с строками HTML ... –

код, который я закончил с использованием как выглядит это благодаря T.J. Кроудер и спасибо комментариям по моему вопросу. Я закончил использовать обнюхивание браузером, а также ориентацию и максимальную ширину, так что стиль должен корректно переключаться практически в любом состоянии.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name=viewport content="width=device-width, initial-scale=1"> 
<title>Home - Finished version</title> 
<meta name="keywords" content="stuff"> 
<meta name="description" content="more stuff"> 
<meta name="author" content="Me"> 
<link rel="icon" href="favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
<link id="insertStyle" rel="stylesheet" href="screen.css"> 
<script src="detectMobile.js"></script> 
<link rel="stylesheet" media="all and (orientation: portrait)" href="mobile.css" /> 
<link rel="stylesheet" media="screen and (max-width: 700px)" href="mobile.css" /> 
</head> 

<body onload="detectMobile();" bgcolor="#ffffff" White center no-repeat scroll;> 
<a style="display:none;" href="#maincontent">Skip to main content</a> 
<a style="display:none;" href="sitemap.html">Sitemap</a> 
<div id=maincontent>Lorum Ipsum</div> 
</body> 
</html>

И в отдельном файле с именем detectMobile.js

function detectMobile() { 
    var text = ""; 
    if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Playstation/i) || navigator.userAgent.match(/mobile/i)) { 
     text = "mobile.css"; 
    } else { 
     text = "screen.css"; 
    } 
    document.getElementById('insertStyle').href=text 
}

Спасибо всем.

источник

2017-01-25 19:53:12 Panopticon36

Javascript для специфических для сервера CSS для мобильных телефонов

ответ

Смежные вопросы