#javascript #jquery #android
#javascript #jquery #Android
Вопрос:
Итак, я нашел в SO некоторый удобный код о проверке ориентации на устройствах Android, который отлично работал для загрузки таблиц стилей на основе поворота устройства, но моя проблема сейчас в том, что если устройство уже «альбомное» ( 90 / -90 в 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' />"));
}
});
Комментарии:
1. Почему бы просто не использовать медиа-запросы CSS?
2. @robertc я использую мультимедийные запросы css, но из-за природы этого элемента он имеет более чем несколько переменных размера и ширины, основанных на разных размерах экрана.
3. Эй, маленькая придирка к условиям ; if(window.orientation == 90) Не забудь 2-е = 😉 И если ты используешь jQuery, почему бы не использовать его по максимуму : api.jquery.com/ready
4. lol .ready справился с задачей, боже, я такой новичок 🙂 опубликуйте это в качестве ответа, чтобы я мог наградить его вам.
5. Но здесь вас волнует только ориентация, так почему важны высота и ширина?
@media all and (orientation: portrait)и@media all and (orientation: landscape)покрыл бы это.
Ответ №1:
ОК,
как я сказал в комментарии, существует проблема с условием :
if(window.orientation == 90)
с двойным =
Не будьте слишком строги к себе, практика делает совершенным
Редактировать: я не слишком уверен в : $('link[title=android]')[0]
использовал бы $('link[title=android]').get(0) вместо
Комментарии:
1. @Micheal Lumbroso я только что использовал то, что вы рекомендовали (см. OP), и, похоже, это все еще не работает, вы видите, где я ошибся?
2. Я думаю, что я заметил другую проблему, смотрите правку (хотя и не уверен). Консоль javascript не выдает никакой ошибки?