Rõ ràng khi đoạn văn bản đạt đến một độ dài nhất định, Google Chrome trên Android quyết định thay đổi kích thước văn bản và làm cho nó lớn hơn (gây ra tất cả các loại thú vị). Bây giờ tôi có một trang web mà khoảng một nửa số thẻ p-tag theo kích thước tôi đã đặt và nửa còn lại thay đổi theo ý muốn - dường như tùy thuộc vào độ dài của đoạn văn.
Làm thế quái nào để tôi sửa lỗi này?
Câu trả lời:
Thêm max-height: 999999px;vào phần tử bạn muốn ngăn tăng cường phông chữ hoặc phần tử gốc của nó.
divyếu tố cấu trúc đã được thu gọn một cách khó hiểu lên đầu trang. Đừng "phủ sóng" trang web của bạn bằng định nghĩa chiều cao tối đa! Chỉ sử dụng khi cần thiết và kiểm tra kỹ lưỡng.
min-height: 1pxrất tiếc là không ảnh hưởng gì. max-height: 999999pxthực hiện thủ thuật mặc dù. Trường hợp của tôi là nội dung chuyển đổi rất dài trong quá trình nhập / rời tuyến đường. Tăng cường phông chữ xảy ra trong hoặc ngay sau quá trình chuyển đổi, không chắc chắn là do đâu, nhưng nó gây ra một sự thay đổi rất đáng chú ý.
Bao gồm <meta>thẻ sau trong tài liệu <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Điều này sẽ thiết lập khung xem một cách chính xác, và do đó loại bỏ sự cần thiết của "FontBoosting".
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">và tôi vẫn nhận được Chromes nhân rộng khủng khiếp
Bây giờ có một thuộc tính CSS mà bạn có thể đặt để kiểm soát điều này:
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
Xem https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
Đặt nó trong thiết lập lại của bạn. html * {max-height:1000000px;}
*cách tiếp cận. Điều đó nói rằng, tôi cho rằng đây là một trong những điều tối nghĩa mà bạn có thể sẽ quên và có thể gây ra vấn đề trong tương lai, vì vậy để bảo trì có lẽ tôi đã để nó *ngay cả khi vào thời điểm đó nó chỉ là một ít phần tử.
* max-height...mã của tôi LOL
Sau một số thử nghiệm, quy tắc này đã giúp tôi ra ngoài. Phải được thêm vào phần tử chứa văn bản được tăng cường hoặc phần tử đó là cha mẹ tùy thuộc vào cấu trúc div / table.
element or parent element {
/* prevent font boosting on mobile devices */
width: 100%;
height: auto;
min-height: 1px;
max-height: 999999px;
}
Có thể các giá trị chiều rộng và chiều cao phải được sửa theo nhu cầu của bạn.
Tôi đã tìm thấy giải pháp cho các trang của mình: cung cấp cho phần tử mẹ chiều rộng và chiều cao! Phông chữ sẽ không đi ra ngoài những đường viền đó, và vì vậy nó sẽ vẫn nhỏ (er).
Điều này được gọi là "tăng cường phông chữ" và được mô tả một số chi tiết trong lỗi WebKit này . Hiện không có cách nào để tắt nó.
max-height: 999999pxnhư @moeffju đã mô tả.