Giữ nguyên kích thước phông chữ HTML khi hướng iPhone thay đổi từ dọc sang ngang

Tôi có một ứng dụng web di động với danh sách không có thứ tự chứa nhiều danh sách với một siêu liên kết bên trong mỗi li:

... Câu hỏi của tôi là làm cách nào tôi có thể định dạng các siêu liên kết để chúng không thay đổi kích thước khi được xem trên iPhone và đồng hồ đo chuyển đổi từ dọc -> ngang? Ngay bây giờ, tôi có kích thước phông chữ siêu liên kết được chỉ định là 14px, nhưng khi chuyển sang ngang, nó sẽ thổi lên đến 20px. Tôi muốn kích thước phông chữ được giữ nguyên. Đây là mã:

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>

Bạn có thể vô hiệu hóa hành vi này thông qua thuộc tính -webkit-text-size-adjustCSS:

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

Việc sử dụng thuộc tính này được mô tả kỹ hơn trong Hướng dẫn nội dung web Safari .

Lưu ý: nếu bạn sử dụng

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

sau đó điều này sẽ vô hiệu hóa hành vi thu phóng trong các trình duyệt mặc định. Một giải pháp tốt hơn là:

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

Điều này sửa hành vi của iPhone / iPad, mà không thay đổi hành vi của máy tính để bàn.

Sử dụng -webkit-text-size-điều chỉnh: none; trực tiếp trên html phá vỡ khả năng phóng to văn bản trong tất cả các trình duyệt webkit. Bạn nên kết hợp điều này với som truy vấn phương tiện truyền thông cụ thể cho iOS. Ví dụ:

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

Như đã đề cập trước đó, quy tắc CSS

 -webkit-text-size-adjust: none

không còn hoạt động trong các thiết bị hiện đại.

May mắn thay, một giải pháp mới xuất hiện cho iOS5 và iOS6 (todo: còn iOS7 thì sao?) :

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

Bạn cũng có thể thêm , user-scalable=0để tắt thu phóng pinch, vì vậy trang web của bạn sẽ hoạt động giống như một ứng dụng gốc. Nếu thiết kế của bạn phanh khi người dùng phóng to, thay vào đó hãy sử dụng thẻ meta này:

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

Bạn có thể thêm một meta trong tiêu đề HTML:

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

Bạn cũng có thể chọn sử dụng thiết lập lại CSS, chẳng hạn như normalize.css , bao gồm cùng một quy tắc mà crazygringo khuyến nghị:

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

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

Như bạn thấy, nó cũng bao gồm một quy tắc cụ thể của nhà cung cấp cho Điện thoại IE.

Để biết thông tin hiện tại về việc triển khai trong các trình duyệt khác nhau, hãy tham khảo trang tham chiếu MDN .

Các mã dưới đây làm việc cho tôi.

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

Hãy thử xóa bộ nhớ cache của trình duyệt nếu nó không hoạt động.

Kể từ tháng 3 năm 2019 , điều chỉnh kích thước văn bản có sự hỗ trợ hợp lý giữa các trình duyệt di động .

body {
  text-size-adjust: none;
}

Sử dụng viewportthẻ meta không ảnh hưởng đến việc điều chỉnh kích thước văn bản và cài đặt user-scalable: no thậm chí không hoạt động trong IOS Safari .

Trong trường hợp của tôi, sự cố này là do tôi đã sử dụng thuộc tính CSS width: 100%cho thẻ HTML input type="text".

Tôi đã thay đổi giá trị widthđến 60% và thêm padding-right:38%.

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