2013-07-17 3 views
0

Я хочу показать другой текст на основе ОС, которую использует пользователь. У меня есть код в селекторе браузера CSS (отсюда: http://rafael.adm.br/css_browser_selector/), но я не уверен, как показать определенный текст на основе ОС.Показать текст на основе ОС

Я знаю, что я должен определить Windows, Linux, Mac OS и т.д. в стиле CSS лист:

.win.chrome .example{ 
... 
} 

Я интересно, как в HTML я могу показать различные значения, если окна, если Linux , и т. д.

+0

Щелчок по этому URL-адресу дает мне предупреждение о безопасности в Firefox под Windows. Если это вызвано плагином обнаружения браузера, вы можете подумать, используя его. – IMSoP

+0

@IMSoP Разве это не из-за выполнения Java (что вызвано хромом)? – RelevantUsername

+0

@RelevantUsername Выполнение Java для чего? Как я уже сказал, если это часть плагина, я бы избегал его, как чума, так как все ваши посетители получат это неприятное всплывающее окно с вопросом, доверяют ли они вашему сайту. – IMSoP

ответ

1

Включите все варианты в HTML, затем используйте селектор CSS, чтобы сделать их всех display: none, за исключением строки «correct», которую вы делаете display: block или display: inline, если необходимо.

См. .

EDIT JS вы связаны добавляет свои классы в корневой элемент документа, т.е. <html>, любое правило, начиная html.win будет соответствовать только тогда, когда страница загружается в Windows. Затем вам нужно добавить классы к своему собственному контенту, которые сообщают, какие ОС должны показать этот конкретный элемент. Например:

HTML:

<div class="win_only_block">You are running Windows!</div> 
<div class="mac_only_block">You are running MacOS!</div> 

CSS:

/* Hide all the switchable blocks by default */ 
.win_only_block, .mac_only_block { display: none; } 

/* Display the elements for the current OS (rule is more specific so will take precedence) */ 
html.win .win_only_block { display: block; } 
html.mac .mac_only_block { display: block; } 
+0

Хорошо, спасибо. Я помещаю теги отображения в стиле css, как выбрать его в html? – Yasir

+0

@ Ясир Я добавил пример моего ответа, показывающий, как ваши HTML и CSS будут связаны друг с другом. – IMSoP

+0

Большое спасибо! Это сработало для меня :) – Yasir

1

Я на самом деле никогда не использовал этот селектор CSS, но почему вы не измените значение "дисплей" атрибут стиля в зависимости от ОПЕРАЦИОННЫЕ СИСТЕМЫ ?

.win .example { 
    display:none; 
} 

.ie7 .example { 
    display:block; 
} 

[...]

0

Используя строку UA, чтобы определить OS несовершенна, но если вы не заботитесь о том, что хорошо. Если определить объект с различных текстовых строк, которые вы хотите, вы можете заменить содержимое элемента с соответствующей строкой:

<script> 
    function detectOS() { 
    // use UA string to detect the OS, it will be wrong sometimes 
    // return mac, win, linux, symbian, palm, ... unknown 
    } 

    function updateText(id) { 
    var text = { 
     mac: 'macs suck', 
     win: 'windows blows', 
     linux: 'linux loses', 
     symbian: 'symbian rocks', 
     ... 
     unknown: 'damn…' 
    } 

    var el = document.getElementById(id); 
    var s = text[detectOS()]; 

    if (typeof el.textContent == 'string') { 
     el.textContent = s; 

    } else if (typeof el.innerText == 'string') { 
     el.innerText = s; 

    } else if (typeof el.innerHTML == 'string') { 
     el.innerHTML = s; 
    } 
    } 
</script> 

И есть строка по умолчанию, где функция терпит неудачу. Не нужно ничего определять в таблице стилей или включать несколько избыточных элементов.

+0

Это требует, чтобы вы смешали содержимое с логикой сценариев, которая является немного уродливой и не очень расширяемой, если вы хотите использовать ее в нескольких контекстах или динамически изменять строки, о которых идет речь (например, i18n, редактируемые в CMS и т. д.). Динамически добавленные классы CSS позволяют использовать HTML для контента, а CSS - как механизм правил, а JS просто предоставляет «клей». – IMSoP

+0

Красота находится в глазах смотрящего. Размещение элемента HTML в документе для каждой ОС, с которой можно столкнуться, зная, что только один из них когда-либо будет отображаться, не очень хорош для меня. ;-) – RobG

+0

Справедливая точка. И вы никогда не сможете по-настоящему сохранить весь свой контент в одном месте, потому что текст неизбежно смешивается со сложной разметкой и логикой. – IMSoP

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