Pertahankan ukuran font HTML saat orientasi iPhone berubah dari portrait ke landscape

Saya memiliki aplikasi web seluler dengan daftar tidak berurutan yang berisi banyak daftar item dengan hyperlink di dalam setiap li:

... Pertanyaan saya adalah bagaimana saya bisa memformat hyperlink sehingga mereka TIDAK mengubah ukuran ketika dilihat pada iPhone, dan accellerometer beralih dari portrait -> landscape? Saat ini, saya memiliki ukuran font hyperlink yang ditentukan hingga 14px, tetapi saat beralih ke lansekap, ia meledak hingga seperti 20px. Saya ingin ukuran font tetap sama. Ini kodenya:

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>

Anda dapat menonaktifkan perilaku ini melalui -webkit-text-size-adjustproperti CSS:

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

Penggunaan properti ini dijelaskan lebih lanjut dalam Panduan Konten Web Safari .

Catatan: jika Anda menggunakan

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

maka ini akan menonaktifkan perilaku zoom di browser default. Solusi yang lebih baik adalah:

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

Ini mengoreksi perilaku iPhone / iPad, tanpa mengubah perilaku desktop.

Menggunakan -webkit-teks-ukuran-sesuaikan: tidak ada; langsung di html, kemampuan untuk memperbesar teks di semua browser webKit terhenti. Anda harus menggabungkan ini dengan beberapa pertanyaan media yang khusus untuk iOS. Sebagai contoh:

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

Seperti yang disebutkan sebelumnya, aturan CSS

 -webkit-text-size-adjust: none

tidak lagi berfungsi di perangkat modern.

Untungnya, solusi baru hadir untuk iOS5 dan iOS6 (todo: bagaimana dengan iOS7?) :

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

Anda juga dapat menambahkan , user-scalable=0untuk mematikan pinch zooming, sehingga situs web Anda akan berperilaku seperti aplikasi asli. Jika desain Anda mengerem ketika pengguna memperbesar, gunakan meta tag ini sebagai gantinya:

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

Anda dapat menambahkan meta di header HTML:

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

Anda juga dapat memilih untuk menggunakan reset CSS, seperti normalize.css , yang mencakup aturan yang sama yang direkomendasikan crazygringo:

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

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

Seperti yang Anda lihat, itu juga termasuk aturan khusus vendor untuk Telepon IE.

Untuk informasi terkini tentang penerapan di berbagai browser, lihat halaman referensi MDN .

Kode di bawah ini berfungsi untuk saya.

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

Coba bersihkan cache browser Anda jika tidak berhasil.

Pada Maret 2019 penyesuaian ukuran teks memiliki dukungan yang masuk akal di antara peramban seluler .

body {
  text-size-adjust: none;
}

Menggunakan viewporttag meta tidak berpengaruh pada penyesuaian ukuran teks dan pengaturan user-scalable: no bahkan tidak berfungsi di iOS Safari .

Dalam kasus saya masalah ini karena saya menggunakan atribut CSS width: 100%untuk tag HTML input type="text".

Saya mengubah nilai widthmenjadi 60% dan menambahkan padding-right:38%.

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