#javascript #android #iphone #mobile
#javascript #Android #iPhone #Мобильный
Вопрос:
Каков наилучший подход к изменению файла css, когда ориентация страницы мобильного приложения меняется с альбомной на книжную и наоборот. Мне нужно поддерживать только Android и iPhone. Кажется, медиа-запросы — это не самый чистый способ, есть другие идеи?
Комментарии:
1. Нет ли какой-либо опции для привязки к событию изменения размера окна, и если X больше, чем Y, это альбомная ориентация? И на Y больше, чем на X, у вас получается портрет? Сохранить 1 переменную как логическое значение isLandscape и, если оно изменилось, отредактировать вашу таблицу стилей?
2. Почему вы думаете, что медиа-запросы CSS не являются чистым решением?
Ответ №1:
Пример
/* For portrait */
@media screen and (orientation: portrait) {
#toolbar {
width: 100%;
}
}
/* For landscape */
@media screen and (orientation: landscape) {
#toolbar {
position: fixed;
width: 2.65em;
height: 100%;
}
p {
margin-left: 2em;
}
}
Более подробную информацию смотрите здесь
Комментарии:
1. @Mike Добро пожаловать. Вы можете выразить свою благодарность, если проголосуете за мой ответ.
2. np только что сделал и снова txs
Ответ №2:
Приведенный ниже код jQuery, похоже, работает лучше всего для меня…в примерах привязки этого не произошло.
$(document).ready(function() {
$(window).resize(function() {
alert(window.orientation);
});
});
Ответ №3:
Сначала присвойте вашей таблице стилей, включающей строку, идентификатор =»cssElement» или что-то в этомроде.
Затем с помощью jQuery:
$(document).ready(function(){
// The event for orientation change
var onChanged = function() {
// The orientation
var orientation = window.orientation;
if(orientation == 90) {
$('#cssElement').attr('href', '/path/to/landscape.css');
} else {
$('#cssElement').attr('href', '/path/to/portrait.css');
}
};
// Bind the orientation change event and bind onLoad
$(window).bind(orientationEvent, onChanged).bind('load', onChanged);
});
Комментарии:
1. Я думал,
window.orientationэто число, а не строка.2. ^^icktoofay, Вы правы (исправлено). Я что-то неправильно прочитал. В любом случае, это / должно / работать в браузере телефона.
Ответ №4:
Вы можете использовать событие window.onorientationchange.