Pertanyaan Bagaimana cara mengatur viewport meta untuk iPhone yang menangani rotasi dengan benar?


Jadi saya telah menggunakan:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>

untuk mendapatkan konten HTML saya untuk ditampilkan dengan baik di iPhone. Ini berfungsi dengan baik sampai pengguna memutar perangkat ke mode lanskap, di mana tampilan tetap dibatasi hingga 320px.

Apakah ada cara sederhana untuk menentukan area pandang yang berubah sebagai tanggapan terhadap perubahan pengguna orientasi perangkat? Atau haruskah saya menggunakan Javascript untuk mengatasinya?


76
2017-08-04 21:27


asal


Jawaban:


Hanya mencoba untuk menyelesaikan masalah ini sendiri, dan solusi yang saya temukan adalah:

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

Ini sepertinya mengunci perangkat ke dalam skala 1.0 terlepas dari orientasi itu. Sebagai efek samping, itu tidak sepenuhnya menonaktifkan skala pengguna (pinch zooming, dll).


108
2018-06-03 04:03



Bagi siapa pun masih tertarik:

http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications

Dari halaman:

<meta name="viewport" content="user-scalable=no,width=device-width" />

Ini menginstruksikan Safari untuk mencegah   pengguna untuk memperbesar halaman   dengan gerakan "cubit" dan memperbaiki   lebar dari port view ke lebar   layar, yang pernah orientasi   iPhone dalam.


18
2018-01-06 07:02



Anda tidak ingin kehilangan opsi penskalaan pengguna jika Anda dapat membantu. Saya suka solusi JS ini dari sini.

<script type="text/javascript">
(function(doc) {

    var addEvent = 'addEventListener',
        type = 'gesturestart',
        qsa = 'querySelectorAll',
        scales = [1, 1],
        meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

    function fix() {
        meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
        doc.removeEventListener(type, fix, true);
    }

    if ((meta = meta[meta.length - 1]) && addEvent in doc) {
        fix();
        scales = [.25, 1.6];
        doc[addEvent](type, fix, true);
    }

}(document));
</script>

10
2017-11-14 09:29



Saya telah datang dengan pendekatan yang agak berbeda yang seharusnya bekerja pada platform lintas

http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/

Sejauh ini saya sudah diuji

Samsun galaxy 2

  • Samsung galaxy s
  • Samsung galaxy s2
  • Samsung galaxy Note (tetapi harus mengubah css menjadi 800px [lihat di bawah] *)
  • Motorola
  • iPhone 4

    • @media screen and (max-width:800px) {

Ini adalah bibir besar ke depan dengan pengembangan ponsel ...


2
2017-11-05 11:45



Anda mengaturnya agar tidak dapat menskalakan (skala maksimum = skala awal), sehingga tidak dapat ditingkatkan saat Anda memutar ke mode lanskap. Setel skala maksimum = 1,6 dan akan diskalakan dengan benar agar sesuai dengan mode lanskap.


1
2017-08-07 00:24



Saya memiliki masalah ini sendiri, dan saya ingin keduanya dapat mengatur lebar, dan memperbaikinya pada rotate dan memungkinkan pengguna untuk menskalakan dan memperbesar halaman (jawaban saat ini memberikan yang pertama tetapi mencegahnya nanti sebagai efek samping ) .. jadi saya menghasilkan perbaikan yang menjaga agar lebar tampilan tetap benar untuk orientasi, tetapi masih memungkinkan untuk diperbesar, meskipun tidak terlalu lurus ke depan.

Pertama, tambahkan Javascript berikut ke halaman web yang Anda tampilkan:

 <script type='text/javascript'>
 function setViewPortWidth(width) {
  var metatags = document.getElementsByTagName('meta');
  for(cnt = 0; cnt < metatags.length; cnt++) { 
   var element = metatags[cnt];
   if(element.getAttribute('name') == 'viewport') {

    element.setAttribute('content','width = '+width+'; maximum-scale = 5; user-scalable = yes');
    document.body.style['max-width'] = width+'px';
   }
  }
 }
 </script>

Kemudian di - (void) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) darimetode InfaceOrientation, tambahkan:

float availableWidth = [EmailVC webViewWidth];
NSString *stringJS;

stringJS = [NSString stringWithFormat:@"document.body.offsetWidth"];
float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue];

if(documentWidth > availableWidth) return; // Don't perform if the document width is larger then available (allow auto-scale)

// Function setViewPortWidth defined in EmailBodyProtocolHandler prepend
stringJS = [NSString stringWithFormat:@"setViewPortWidth(%f);",availableWidth];
[_webView stringByEvaluatingJavaScriptFromString:stringJS];

Tweak Tambahan dapat dilakukan dengan memodifikasi lebih dari pengaturan konten viewportal:

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags .htm

Juga, saya mengerti Anda dapat menempatkan pendengar JS untuk onresize atau sesuatu yang memicu pemindaian ulang, tetapi ini bekerja untuk saya karena saya melakukannya dari kerangka kerja Cocoa Touch UI.

Semoga ini membantu seseorang :)


1
2018-03-15 00:39



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

suport semua iphones, semua ipads, semua android.


0
2018-02-11 07:38



hanya ingin berbagi, saya telah bermain-main dengan pengaturan viewport untuk desain responsif saya, jika saya mengatur skala Max ke 0,8, skala awal ke 1 dan terukur ke tidak maka saya mendapatkan tampilan terkecil dalam mode potret dan tampilan iPad untuk lanskap: D ... ini benar-benar sebuah peretasan yang jelek tetapi tampaknya berhasil, saya tidak tahu mengapa jadi saya tidak akan menggunakannya, tetapi hasil yang menarik

<meta name="viewport" content="user-scalable=no, initial-scale = 1.0,maximum-scale = 0.8,width=device-width" />

Nikmati :)


-1
2018-04-01 14:33