2014-11-22 31 views
6

Tôi muốn có một trang web đơn giản hoạt động trên cả trình duyệt trên máy tính để bàn và thiết bị di động và gặp sự cố lạ (rookie): khi tôi có một bảng có văn bản cột độ dài khác nhau, kích thước phông chữ được hiển thị trong thiết bị di động khác nhau đáng kể. Bất kỳ ý tưởng tại sao điều này xảy ra và sửa chữa nhanh chóng và sạch sẽ là gì? Cảm ơn trước sự giúp đỡ của bạn!HTML/CSS: kích thước phông chữ bảng khác nhau trong thiết bị di động

Mã HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
    body { 
     font-family: Verdana, Geneva, Arial, sans-serif; 
     font-size: medium; 
    } 
    table, td { 
     border: 1px solid black; 
    } 
    </style> 
    </head> 
    <body> 
    <table> 
     <tr> 
     <td>Short text. Short text</td> 
     <td>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. </td> 
     </tr> 
    </table> 
    </body> 
</html> 

Renders ổn trên trình duyệt máy tính để bàn

desktop

Weird cỡ chữ trên trình duyệt của điện thoại di động (chrome emulator)

mobile

+0

gì giả lập bạn đang đề cập đến? Điều này có vẻ là một lỗi trong trình mô phỏng thay vì bất kỳ thứ gì khác. –

+0

Tôi đang sử dụng trình giả lập trên thiết bị di động của Google Chrome và không phải là lỗi --- tôi thấy hiệu ứng dựng hình tương tự trên điện thoại thông minh của mình (và đó là lý do tôi đặt ra để khắc phục). –

+1

Bạn đúng, sự kỳ quặc này thực sự xảy ra trong Chrome trên Android (và thẻ 'meta' được đề xuất trong câu trả lời sửa lỗi này). –

Trả lời

7

Bạn cần để xem xét s đặt chế độ xem chế độ xem của ứng dụng của bạn. Để tạo một ứng dụng web thân thiện với thiết bị di động, bạn có thể cần phải đặt ứng dụng này trong tiêu đề của mình. Bạn có thể làm như vậy bằng cách thêm thẻ <meta> giữa các thẻ <head> của mình. Dưới đây là một ví dụ:

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 

Đối với một mô tả đầy đủ về những gì một khung nhìn là gì và làm thế nào nó được sử dụng, bạn có thể truy cập bài viết Configuring the Viewport từ Apple phát triển vì nó lần đầu tiên được giới thiệu cho Safari Mobile.

+0

Cảm ơn @Abel, nhưng việc thay đổi cỡ chữ không giải quyết được vấn đề của tôi --- trình giả lập vẫn có kích thước phông chữ khác nhau trên hai cột. –

+0

@YingXiong hãy xem câu trả lời đã chỉnh sửa của tôi nếu nó hoạt động cho bạn –

+2

Đúng, thẻ '' sửa chữa kết xuất. Nếu bạn có thể vui lòng thêm một số lời giải thích thêm về thẻ đó, tôi thực sự đánh giá cao nó! –

0

thử này

body { 
    font-family: Verdana, Geneva, Arial, sans-serif; 
    font-size: 15px; 
} 
+1

Cảm ơn, @Reza, nhưng việc đặt kích thước phông chữ không giải quyết được sự cố của tôi. –

Các vấn đề liên quan