2012-02-02 67 views
1

我試圖找出一個方法時,該設備採用旋轉到JQM調整文本區域。基本上,我有一個看起來不錯加載時,無論是在肖像或風景文本區域,不過,當設備旋轉時,它不會調整。這裏是一個位的代碼如下所示:jQuery Mobile的設備方向變化不調整文本區域

.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--> 

,然後orientationChange事件:

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

什麼想法?謝謝!

回答

0

您是否嘗試過給textarea的媒體查詢中的最小寬度?

@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; 
    } 
} 
+0

那是什麼語法?我只是做用JS,HTML瀏覽器這一權利,以及CSS – gabaum10 2012-02-02 17:18:05

+0

而且,那iPad和東西呢?該器件尺寸永遠不會是恆定的,所以你不能硬編碼的最小/最大寬度... – gabaum10 2012-02-02 17:21:40

+0

好吧,你有你的問題的一個真人版測試? – 2012-02-03 14:14:20