Uncategorized

Trick nhỏ làm việc với text reponsive trên mobile

Nhiều trình duyệt di động áp dụng một thuật toán để làm cho text lớn hơn và dễ đọc hơn. Khi một phần tử có chứa text sử dụng 100% chiều rộng của màn hình, kích thước văn bản của nó sẽ tăng lên cho đến khi nó đạt đến kích thước có thể đọc được, nhưng không sửa đổi bố cục.

text-size-adjust: none;

dòng css trên sẽ ngăn thiết bị tự resize text.

/* Text không bao giờ bị phóng to */
text-size-adjust: none;

/* Text có thể được phóng */
text-size-adjust: auto;

/* Text có thể được phóng theo tỉ lệ 80% */
text-size-adjust: 80%;

/* Giá trị mặc định */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;

Ngoài ra để chính xác với từng trình duyệt nó phải có tiền tố

-moz-text-size-adjust: none // Mozilla Firefox
-webkit-text-size-adjust: none //Chrome
-ms-text-size-adjust: none //Microsoft IE