最も簡単な方法は、ブラウザがモバイルデバイスであるかどうかを検出し、それに応じて新しいスタイルシートを選択することです。
これは、さまざまなデバイスのすべてとその機能を検出することにかなり関与する可能性があります。最初は、いくつかの画面サイズにしか対応しないことをお勧めします。あなたは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);
}
}
}
にこのコードのようなものを置くことができ
私は現在のWebアプリケーション上でのモバイルサポートを実装しましたように私は、サブディレクトリ/モバイルでのWebページを複製しました。重複コード私は知っているが、それを行う最も速い方法だった。
私は、次のを持っている私の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シートと浮動小数点ブロックを置き換えて、その位置はスタイルシートによって指示されます。
私はこれがあなたを邪魔するのを助けることを願っています。モバイルフレンドリーHTML/CSSレイアウトの