Thiết kế web đáp ứng đang hoạt động trên máy tính để bàn nhưng không hoạt động trên thiết bị di động

117

Tôi có một trang web phải đáp ứng cho điện thoại di động. Tôi đã tạo nó bằng máy tính để bàn của mình. Khi tôi điều chỉnh cửa sổ trình duyệt, nó hoạt động hoàn hảo cho điện thoại di động nhưng khi tôi kiểm tra nó trên điện thoại di động thực của mình: Samsung Galaxy S2 nó không phản hồi với chế độ xem di động.

Điều gì có thể là sai?

mobile web responsive-design

— Tadas Davidsonas
nguồn

1

Bạn sẽ phải bổ sung thêm thông tin và mã để bất kỳ ai hữu ích. CSS của bạn, HTML, vv khuôn khổ gì (chẳng hạn như Twitter Bootstrap) bạn đang sử dụng, nếu có, vv

— ajacian81

306

Có thể bạn đang thiếu thẻ meta khung nhìn trong phần đầu html:

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

Nếu không có nó, thiết bị sẽ giả định và đặt chế độ xem thành kích thước đầy đủ.

Thêm thông tin ở đây .

— Agush
nguồn

2

Nó có thể hoạt động trên trình duyệt không có dòng này nhưng trên thiết bị di động thì chỉ cần dòng này.

— Tadas Davidsonas

3

Tôi chỉ yêu mình bạn

— Dimitris Filippou

Tôi cũng yêu bạn @ ΔημήτρηςΦιλίππου

— Agush

Một lời yêu thương đến bạn

— btlm

3

đảm bảo sản xuất index.htmlthực sự bao gồm thẻ cũng như phát triểnindex.html

— halafi

6

Tôi cũng đã phải đối mặt với vấn đề này. Cuối cùng tôi đã có một giải pháp. Sử dụng mã dưới đây. Hy vọng: vấn đề sẽ được giải quyết.

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

— Hồi giáo sai lầm
nguồn

2

Mặc dù nó đã được trả lời ở trên và nó được quyền sử dụng

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

nhưng nếu bạn đang sử dụng React và webpack thì đừng quên đóng thẻ phần tử

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

— Shadab Ahmed
nguồn

-1

Thẻ meta đáp ứng

Để đảm bảo hiển thị phù hợp và phóng to chạm cho tất cả các thiết bị, hãy thêm thẻ meta chế độ xem đáp ứng vào của bạn <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

— Marcelo Áo
nguồn