Самый простой способ здесь - определить, является ли браузер мобильным устройством или нет, и затем соответствующим образом выбрать новую таблицу стилей.
Может потребоваться обнаружение всех различных устройств и их возможностей.и поэтому вначале я хотел бы предложить, чтобы вы обслуживали только несколько размеров экрана.
Вы можете поместить что-то вроде этого кода в default.aspx
protected void Application_Start(object sender, EventArgs e)
{
// Redirect mobile users to the mobile site
HttpRequest httpRequest = HttpContext.Current.Request;
if (!httpRequest.Browser.IsMobileDevice)
{
string path = httpRequest.Url.PathAndQuery;
bool isOnMobilePage = path.StartsWith("/Mobile/",
StringComparison.OrdinalIgnoreCase);
if (!isOnMobilePage)
{
string redirectTo = "~/Mobile/";
// Could also add special logic to redirect from certain
// recognised pages to the mobile equivalents of those
// pages (where they exist). For example,
// if (HttpContext.Current.Handler is UserRegistration)
// redirectTo = "~/Mobile/Register.aspx";
HttpContext.Current.Response.Redirect(redirectTo);
}
}
}
Здесь я продублировал сетьстраницы в подкаталоге / mobile, поскольку я реализовывал поддержку мобильных устройств в текущем веб-приложении.Дублированный код, я знаю, но это был самый быстрый способ сделать это.
На моей странице mobile.master у меня есть следующее:
<link href="../Css/Mobile.css" rel="stylesheet" media="handheld" type="text/css" />
<link href="../Css/Mobile.css" rel="stylesheet" media="Screen" type="text/css" title="default"/>
<link rel="alternate stylesheet" type="text/css" href="../Css/thin.css" title="thin"/>
<link rel="alternate stylesheet" type="text/css" href="../Css/wide.css" title="wide"/>
<link rel="alternate stylesheet" type="text/css" href="../Css/medium.css" title="medium"/>
и
<script type='text/javascript' src='Javascript/resolution.js'></script>
Сам скрипт (resolution.js):
function getBrowserWidth() {
if (window.innerWidth) {
return window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth != 0) {
return document.documentElement.clientWidth;
}
else if (document.body) { return document.body.clientWidth; }
return 0;
}
function dynamicLayout() {
var browserWidth = getBrowserWidth();
//Load Thin CSS Rules
if (browserWidth < 640) {
changeLayout("thin");
}
//Load Wide CSS Rules
if ((browserWidth >= 640) && (browserWidth <= 900)) {
changeLayout("medium");
}
//Load Wider CSS Rules
if (browserWidth > 900) {
changeLayout("wide");
}
}
function changeLayout(description) {
var i, a;
for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
if (a.getAttribute("title") == description) { a.disabled = false; }
else if (a.getAttribute("title") != "default") { a.disabled = true; }
}
}
function addEvent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e" + type + fn] = fn;
obj[type + fn] = function() { obj["e" + type + fn](window.event); }
obj.attachEvent("on" + type, obj[type + fn]);
}
}
addEvent(window, 'load', dynamicLayout);
addEvent(window, 'resize', dynamicLayout);
Затем у меня есть 3 таблицы стилей, тонкий, средний и широкий, которые вызывают.Было бы целесообразно разместить ссылку на полноразмерную веб-страницу для пользователей смартфонов, которые могут обрабатывать веб-страницы стандартного размера.
Таблицы стилей определяют не только размер экрана, но и шрифт, цвета и элементы.местоположения.
Таблицы - настоящая боль здесь, поскольку они плохо меняют размер.Я заменил мой на div и плавающие блоки, положение которых определяется таблицей стилей.
Я надеюсь, что это поможет вам встать на путь.