изменить CSS в соответствии с OS в angularjs

Я работаю с мобильным приложением с использованием угловых и ионных фреймворков. Мое приложение предназначено как для Android, так и для ios-устройств. Но мне нужны два разных стиля CSS для iOS и Android-устройств. Есть ли способ обнаружить ОС и соответственно изменить CSS.изменить CSS в соответствии с OS в angularjs

Я нашел вопрос в stackoverflow, подобный этому. Но я не уверен, что это способ сделать это.

Detect device and swap the CSS file - jQuery

Могу ли я иметь шаг за шагом инструкции о том, как это сделать? Заранее спасибо :)

источник

2014-10-16 CraZyDroiD

, так как вы используете ионную, вы просто использовать ngCordova LIB развиваться тем же человек/команда. http://ngcordova.com/docs/#Device – wayne

Как я могу использовать это, чтобы изменить файл CSS.объясните, потому что я новичок в программировании – CraZyDroiD

Поскольку вы создаете приложение, я бы сделал эту часть процесса сборки. Я недостаточно осведомлен, но я думаю, что есть возможность поменять файлы css, например, на «ионный сборщик Android». Есть что-то, что можно сказать о едином опыте работы с устройствами, поэтому вы можете пересмотреть это: http://forum.ionicframework.com/t/separate-css-for-android-and-ios/1639. Вы всегда можете сохранить файл «iphone.css» и «android.css» и просто заменить свой общий файл «site.css» на подходящий для своего устройства при создании. –

Вот решение, которое вы, возможно, ищете. Просто используйте этот код

// This script sets OSName variable as follows: 
// "Windows" for all versions of Windows 
// "MacOS"  for all versions of Macintosh OS 
// "Linux"  for all versions of Linux 
// "UNIX"  for all other UNIX flavors 
// "Unknown OS" indicates failure to detect the OS 

var OSName="Unknown OS"; 
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows"; 
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; 
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX"; 
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux"; 

if (OSName == "Windows"){$(document.body).append("<link rel='stylesheet' type='text/css' href='this.css'>")} 

// etc...

Reference

Вы можете также use userAgent too

источник

2014-10-16 05:41:53

Используйте плагин Device.

http://docs.phonegap.com/en/3.0.0/cordova_device_device.md.html

Затем вы получите доступ к ОС с вар thisDevice = device.platform и вы можете использовать селектор (подобный, если/другое заявление), чтобы загрузить другую таблицу стилей.

источник

2014-10-16 04:13:43

Прошу прощения, я этого не понимаю. Не могли бы вы объяснить мне, что делать – CraZyDroiD

Прочтите этот связанный документ. –

Общее руководство говорит

нет - изменение внешнего вида на основе обнаружения устройства не считается очень хорошая практика кодирования.
да - изменение внешнего вида на основе обнаружения возможностей устройств является хорошей практикой кодирования.

См HTML Goodies: Targeting Specific Devices in your Style Sheets и особенно Modernizr: the feature detection library for HTML5/CSS3 для дальнейшего обсуждения.

Однако, если обнаружение устройства упрощает вам работу и приносит больше удобства пользователю, тогда прочитайте HTML5ROCKS: A non-responsive approach to building cross-device webapps для списка опций и за/против.

Если вы все еще хотите, чтобы пройти путь обнаружения на стороне клиента устройства, то статья Stack Overflow: Add a CSS stylesheet only for iOS devices содержит своего рода «шаг за шагом» 1 конкретный пример кодирования

источник

2014-10-16 08:36:31 xmojmr

Ionic имеет методы для обнаружения устройств ionic.Platform.isAndroid(), ionic.Platform.isIOS().

Вы можете загрузить устройство определенные стили, используя этот код в index.html:

<!-- Load platform specific styles --> 
    <script> 
     // Utilize Ionic’s methods for determining platform 
     if (ionic.Platform.isAndroid()) { 
     // Android styles 
     document.write('<link href="css/ionic.android.app.css" rel="stylesheet">'); 
     } else if (ionic.Platform.isIOS()) { 
     // iOS Styles 
     document.write('<link href="css/ionic.ios.app.css" rel="stylesheet">'); 
     } else { 
     // Browser development styles (use Android) 
     document.write('<link href="css/ionic.android.app.css" rel="stylesheet">'); 
     } 
    </script>

источник

2016-06-07 08:26:59 zarcode

изменить CSS в соответствии с OS в angularjs

ответ

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