JQuery मोबाइल डिवाइस स्केलिंग

मैं JQuery मोबाइल का उपयोग कर रहा हूं और मुझे अपने ब्राउज़र से अपने आईफोन में स्केलिंग में परेशानी हो रही है।JQuery मोबाइल डिवाइस स्केलिंग

जब मैं इसे ब्राउज़र (सफारी) पर लोड करता हूं तो यह छोटा हो जाता है और ठीक हो जाता है। हालांकि जब मैं इसे अपने आईफोन पर लोड करता हूं तो यह स्केल नहीं करता है। यह आपको बाएं और दाएं स्क्रॉल करने की अनुमति देता है जब इसे नहीं करना चाहिए।

क्या ऐसा कुछ है जिसे मैं यह मानने के लिए जोड़ना चाहता हूं कि यह एक मोबाइल डिवाइस है।

यहां मेरा वर्तमान HTML है।

<head> 
     <title>Page Title</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://www.domain.com/css/jquery.mobile-1.0b1.min.css" /> 
     <link rel="stylesheet" href="http://www.domain.com/css/base.css" /> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"> 

     </script> 
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
    </head> 

    <body> 

     <body> 
      <!-- Start of first page --> 
      <div data-role="page"> 
       <div data-role="header"> 
        <div id="header"> 
         <ul> 
          <li> 
           <div><a href="logout.php">Logout</a> 
           </div> 
          </li> 
          <li style="float:right;"> 
           <div><a href="new.php">New</a> 
           </div> 
          </li> 
          <h1 align="center">Title</h1> 

         </ul> 
         <div id="clear"></div> 
        </div> 
       </div> 
       <!-- /header --> 
       <div id="stream"> 
        <div id="stream_story"> 
         <ul style="width:100%"> 
          <li> 
           <img src="" /> 
          </li> 
          <li style="float:right;">></li> 
          <li style="width:75%;margin-bottom:10px;margin-left:5px;">Content 
           <br/><span>Content</span> 
          </li> 
         </ul> 
        </div> 
        <div id="clear"></div> 
        <hr/> 
       </div> 
       <!-- /content --> 
      </div> 
      <!-- /page --> 
     </body> 
    </body> 

</html>

स्रोत

2011-06-23 Chris

मेटा टैग के साथ खेलने का प्रयास करें: <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-पैमाने = 1"> –

मैं भी iPhone व्यूपोर्ट और JQuery मोबाइल के साथ समस्या नहीं थी, मैं निम्नलिखित समाधान के साथ समाप्त हो गया।

एक मेटा टैग कि डिवाइस ऊँचाई/उपकरण-चौड़ाई को ऊंचाई और चौड़ाई सेट जोड़ें (आप उपयोगकर्ता 1 हालांकि ज़ूम निम्नलिखित में अक्षम है ऊपर कुछ करने के लिए अधिक से अधिक पैमाने बदलकर ज़ूम करने के लिए अनुमति दे सकते हैं उदाहरण के लिए, मेरा मानना है कि मोबाइल सफारी 10 के लिए एक मूल्य की अनुमति देता है): उपयोगकर्ता iPhone पर उन्मुखीकरण में परिवर्तन

<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" >

जैसा कि मैंने फिर से स्केलिंग के साथ कुछ अजीब व्यवहार देखा और सफेद अंतरिक्ष इसलिए जोड़ा मैंने निम्नलिखित कोड का उपयोग किया:

 
    //check the navigator.userAgent string to detect if the user is using an iPhone 
    if (navigator.userAgent.match(/iPhone/i)) { 

     //cache the viewport tag if the user is using an iPhone 
     var $viewport = $('head').children('meta[name="viewport"]'); 

     //bind an event handler to the window object for the orientationchange event 
     $(window).bind('orientationchange', function() { 
      if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) { 

       //landscape 
       $viewport.attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0'); 
      } else { 

       //portrait 
       $viewport.attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0'); 
      } 

     //trigger an orientationchange event on the window object to initialize this code (basically in-case the user opens the page in landscape mode) 
     }).trigger('orientationchange'); 
    }

यदि/तो ईवेंट हैंडलर चेकों जो उन्मुखीकरण के लिए उपयोगकर्ता के लिए बदल गया है में बयान और $viewport.attr('content',... लाइनों (90, -90, और 270 सभी मूल्यों मैं परिदृश्य के लिए देखा है कर रहे हैं) बस व्यूपोर्ट टैग में ऊंचाई और चौड़ाई मान स्विच करें।

स्रोत

2011-06-23 16:11:43 Jasper

+1 पूरी तरह से काम करता है, इस टिप के लिए धन्यवाद। – Fore

यह jQuer मोबाइल 1.0 आरसी 2 में मेरे लिए काम नहीं कर रहा है। - इस समाधान/संस्करण के साथ किसी और के पास कुछ भाग्य था? – Smamatti

धन्यवाद। आप एक आदमी। – mousedown

Jquery मोबाइल 1.1.0 में, उपर्युक्त उत्तर केवल मेरे लिए पोर्ट्रेट अभिविन्यास में काम करता प्रतीत होता है। मैं चारों ओर खोज की है और किसी भी जावास्क्रिप्ट की आवश्यकता के बिना, मेटा टैग, जो (मेरे मामले में) दोनों झुकाव में काम के इस संस्करण पाया:

<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">

(निर्दिष्ट डिवाइस चौड़ाई, लेकिन नहीं ऊंचाई।)

स्रोत: http://www.wintellect.com/cs/blogs/rrobinson/archive/2011/07/25/how-to-scale-a-jquery-mobile-site-for-ios.aspx

स्रोत

2012-06-05 21:35:07

JQuery मोबाइल डिवाइस स्केलिंग

उत्तर

संबंधित मुद्दे