Изменение ориентации мобильного устройства jquery без изменения размера текстовой области

Question

Я пытаюсь найти способ изменить размер текстовой области, используя JQM, когда устройство вращается. По сути, у меня есть текстовая область, которая хорошо выглядит при загрузке, в вертикальной или горизонтальной ориентации, но при повороте устройства она не изменяется. Вот как выглядит код:

.message-entry{
   margin-left:10px;
   margin-right:0;
   margin-bottom:-20px;
}

и HTML:

 <footer data-role="footer" id="footer" data-theme="b" data-position="fixed">               
            <label class="label-message-entry" for="chatMessageEntry">Enter a message:</label>
            <textarea rows="8" name="textarea" class="message-entry" id="chatMessageEntry"></textarea>
            <a id="chatReplyButton" class="reply-button" data-role="button" data-icon="plus">Reply</a>              
        </footer> <!--end footer--> 

, а затем событие смены ориентации:

$(window).bind( 'orientationchange', function(e){
        var newWidth = $(window).width();
        $('.message-entry').css({'width':newWidth + 'px'});     
});

есть идеи? Спасибо!

Answer 1

Вы пытались задать текстовой области минимальную ширину в медиа-запросе?

@media all and (max-width: 480px) and (min-width: 321px){
    .message-entry{
        min-width:470px;
    }
}
@media all and (max-width: 320px){
    .message-entry{
        min-width:310px;
    }
}