İPhone yönü dikeyden yataya değiştiğinde HTML yazı tipi boyutunu koru

Ben her li içinde bir köprü ile birden çok listitems içeren sırasız bir liste ile bir mobil web uygulaması var:

... Sorum şu ki, köprüleri bir iPhone'da görüntülendiğinde boyutu değiştirmeyecek şekilde nasıl biçimlendirebilirim ve hız ölçer portre -> manzaradan geçer mi? Şu anda, 14px'e özgü köprü yazı tipi boyutum var, ancak manzaraya geçerken, 20px'e kadar patlıyor. Yazı tipi boyutunun aynı kalmasını istiyorum. İşte kod:

ul li a
{
  font-size:14px;
  text-decoration: none;
  color: #cc9999;
}

<ul>
  <li id="home" class="active">
    <a href="home.html">HOME</a>
  </li>
  <li id="home" class="active">
    <a href="test.html">TEST</a>
  </li>
</ul>

Bu davranışı -webkit-text-size-adjustCSS özelliği üzerinden devre dışı bırakabilirsiniz :

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

Bu özelliğin kullanımı Safari Web İçerik Kılavuzu'nda daha ayrıntılı olarak açıklanmaktadır .

Not: kullanıyorsanız

html {
    -webkit-text-size-adjust: none;
}

bu, varsayılan tarayıcılarda yakınlaştırma davranışını devre dışı bırakır. Daha iyi bir çözüm:

html {
    -webkit-text-size-adjust: 100%;
}

Bu, masaüstü davranışını değiştirmeden iPhone / iPad davranışını düzeltir.

-Webkit-text-size-adjust kullanma: none; doğrudan html üzerinde tüm webkit tarayıcılarında metin yakınlaştırma yeteneğini kırar. Bunu iOS'a özgü som medya sorgularıyla birleştirmelisiniz. Örneğin:

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
     html {
        -webkit-text-size-adjust: none;
     }
}

Daha önce de belirtildiği gibi, CSS kuralı

 -webkit-text-size-adjust: none

artık modern cihazlarda çalışmaz.

Neyse ki, iOS5 ve iOS6 için yeni bir çözüm geliyor (yapılacaklar: iOS7 ne olacak?) :

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

, user-scalable=0Sıkıştırma yakınlaştırmayı kapatmak için de ekleyebilirsiniz , böylece web siteniz yerel bir uygulama gibi davranır. Kullanıcı yakınlaştırdığında tasarımınız frenlenirse, bunun yerine bu meta etiketi kullanın:

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

HTML başlığına bir meta ekleyebilirsiniz:

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

Ayrıca , crazygringo'nun önerdiği kuralın aynısını içeren normalize.css gibi bir CSS sıfırlaması kullanmayı da tercih edebilirsiniz :

/**
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

Gördüğünüz gibi, IE Telefon için satıcıya özel bir kural da içerir.

Farklı tarayıcılarda uygulama hakkında güncel bilgiler için MDN başvuru sayfasına bakın .

Aşağıdaki kod benim için çalışıyor.

html{-webkit-text-size-adjust: 100%;}

Eğer işe yaramazsa tarayıcı önbelleğinizi temizlemeyi deneyin.

Mart 2019'dan itibaren metin boyutu ayarlama , mobil tarayıcılar arasında makul bir desteğe sahiptir .

body {
  text-size-adjust: none;
}

viewportMeta etiket kullanmanın metin boyutu ayarlaması üzerinde bir etkisi yoktur ve ayar user-scalable: no IOS Safari'de bile çalışmaz .

Benim durumumda bu sorun, width: 100%HTML etiketi için CSS özniteliğini kullandığımdan kaynaklandı input type="text".

Değerini width% 60 olarak değiştirdim ve ekledim padding-right:38%.

input {
    padding-right: 38%;
    width: 60%;
}