Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core
Учитывая особенности мобильных устройств - размеры, поддержку тех или иных стилей CSS и т.д. - может потребоваться определить какой-то особенный стиль для мобильных устройств.
В CSS2 уже было решение в виде правила media, которое позволяет указать устройство, для которого используется данный стиль:
<html> <head> <title>Мобильный сайт</title> <link media="handheld" rel="stylesheet" href="mobile.css"> <link media="screen" rel="stylesheet" href="desktop.css"> </head> <body> ......................
Правило media="handheld" указывает, что стили в mobile.css будут применяться к мобильным устройствам, в то время как правило
media="screen" применяется к десктопным сайтам.
Однако многие современные мобильные браузеры по умолчанию считают, что страница предназначена для десктопов, поэтому в любом случае применяет
правило media="screen". Поэтому на подобное решение не стоит полагаться.
Для решения этой проблемы в CSS3 были введен механизм CSS3 Media Query. Например, чтобы применить стиль только к мобильным устройствам мы можем написать так:
<html> <head> <title>Мобильный сайт</title> <link rel="stylesheet" type="text/css" media="screen" href="desctop.css" /> <link rel="stylesheet" type="text/css" media="screen and (max-device-width:480px)" href="mobile.css" /> </head> <body> ................................
Значение атрибута media screen and (max-device-width:480px) говорит нам о том, что стили из файла mobile.css будут
применяться к тем устройствам, максимальная ширина экрана которых составляет 480 пикселей - то есть фактически это и есть мобильные устройства.
Как вариант, можно использовать правила CSS3 Media Query в самом файле css:
@media screen{
body {
background-color: red;
}
/*Далее остальные стили*/
}
@media screen and (max-device-width:480px){
body {
background-color: blue;
}
/*Далее остальные стили*/
}
К примеру настройка стилей под смартфоны, планшеты и десктопы может выглядеть так:
/*Стили только для смартфонов*/
@media screen and (max-device-width:480px){
body {
background-color: blue;
}
/*Далее остальные стили*/
}
/*Стили только для планшетов*/
@media screen and (min-device-width:481px){
body {
background-color: red;
}
/*Далее остальные стили*/
}
/*Стили только для десктопов*/
@media screen and (min-width:769px){
body {
background-color: yellow;
}
/*Далее остальные стили*/
}
Применяемые функции в CSS3 Media Query:
aspect-ratio: отношение ширины к высоте области отображения (браузера)
device-aspect-ratio: отношение ширины к высоте экрана устройства
max-width/min-width и max-height/min-height: максимальная и минимальная ширина и высота области отображения (браузера)
max-device-width/min-device-width и max-device-height/min-device-height: максимальная и минимальная ширина и высота экрана мобильного устройства
orientation: ориентация (портретная или альбомная)
Например, мы можем задать разные стили для разных ориентаций мобильных устройств:
/*Стили для портретной ориентации*/
@media only screen and (orientation: portrait){
}
/*Стили ландшафтной ориентации*/
@media only screen and (orientation: landscape){
}
Таким образом, мы меняем лишь определение стилей в зависимости от устройства, а сами стили css по сути остаются теми же, что мы используем для создания обычных сайтов. Теперь посмотрим, как мы можем создавать мобильные приложения непосредственно на платформе ASP.NET MVC 4.