2012-02-02 7 views
1

デバイスの回転時にJQMを使用してテキスト領域のサイズを変更する方法を理解しようとしています。基本的には、縦書きでも横向きでも読み込み時に見栄えのよいテキスト領域がありますが、デバイスが回転してもサイズは変更されません。jqueryモバイルデバイスの方向変更がテキスト領域のサイズ変更ではない

.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

+0

しかし、また、iPadsやものについてはどうですか?デバイスのサイズは決して一定にならないので、最小/最大幅をハードコーディングすることはできません。 – gabaum10

+0

OK、テストする問題のライブバージョンがありますか? –

関連する問題