【发布时间】：2011-05-18 14:25:37
【问题描述】：
所以我在 SO 上找到了一些关于在 android 设备上检查 oreintation 的方便代码，它非常适合根据设备的旋转加载样式表，但我现在的问题是，如果设备已经是“风景”（@987654322 @ 在 JS 中）然后它忽略了下面代码中的规则，所以我需要下面的代码来运行 onload，我已经尝试过，但似乎我无法正确处理。
请帮忙？
//detect orientation change
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
if(window.orientation == 90) {
$('link[title=android]')[0].disabled=true;
$("head").append($("<link title='android_90' rel='stylesheet' href='css/android_90.css' type='text/css' />"));
} else if (window.oreintation == -90) {
$('link[title=android]')[0].disabled=true;
$("head").append($("<link title='android_90' rel='stylesheet' href='css/android_90.css' type='text/css' />"));
} else if (window.oreintation == 0){
$('link[title=android_90]')[0].disabled=true;
$("head").append($("<link title='android' rel='stylesheet' href='css/android.css' type='text/css' />"));
} else if (window.oreintation == 180){
$('link[title=android_90]')[0].disabled=true;
$("head").append($("<link title='android' rel='stylesheet' href='css/android.css' type='text/css' />"));
}
}, false);
//check on window.load
$(document).ready(function () {
if(window.orientation == 90) {
$('link[title=android]')[0].disabled=true;
$("head").append($("<link title='android_90' rel='stylesheet' href='css/android_90.css' type='text/css' />"));
} else if (window.oreintation == -90) {
$('link[title=android]')[0].disabled=true;
$("head").append($("<link title='android_90' rel='stylesheet' href='css/android_90.css' type='text/css' />"));
} else if (window.oreintation == 0){
$('link[title=android_90]')[0].disabled=true;
$("head").append($("<link title='android' rel='stylesheet' href='css/android.css' type='text/css' />"));
} else if (window.oreintation == 180){
$('link[title=android_90]')[0].disabled=true;
$("head").append($("<link title='android' rel='stylesheet' href='css/android.css' type='text/css' />"));
}
});
【问题讨论】：
-
为什么不直接使用 CSS 媒体查询？
-
@robertc 我正在使用 css 媒体查询，但由于此元素的性质，它具有多个基于不同屏幕尺寸的尺寸和宽度变量。
-
嘿，有条件的小挑剔； if(window.orientation == 90) 不要忘记第二个 = ;-) 如果你使用 jQuery，为什么不最大限度地使用它：api.jquery.com/ready
-
lol .ready 完成了这项工作，上帝啊，我真是个新手 :) 将其发布为答案，以便我将其奖励给您。
-
但是在这里你只关心方向，那么为什么高度和宽度很重要呢？
@media all and (orientation: portrait)和@media all and (orientation: landscape)会覆盖它。
标签： javascript jquery android