Email đáp ứng trên ứng dụng Gmail (Android)

Question

Tôi đã tạo mẫu email đáp ứng hoạt động trong tất cả các ứng dụng web, tất cả các phiên bản của triển vọng, thư táo, thunderbird, iOS, ứng dụng 'Mail' của HTC và gần như mọi thứ khác trừ Lotus notes.

Không hoạt động trên ứng dụng Gmail trên Android. Tôi khá chắc chắn điều này là bởi vì gmail dải ra tất cả các css trong tiêu đề (trong đó có các phương tiện truyền thông truy vấn) để nó hiển thị phiên bản web tiêu chuẩn nhưng cửa sổ là kích thước điện thoại di động, vì vậy nó cho thấy khoảng 300px một nửa email. Có anyway để buộc nó để sử dụng truy vấn phương tiện truyền thông? Không có cách nào để thay đổi chế độ xem? Điều gì sẽ là lựa chọn tốt nhất mùa thu trở lại?

Cảm ơn!

Answer 1

Không có giải pháp thay thế bằng truy vấn phương tiện vì chúng không thể được gạch chân. Rất tiếc, không có giải pháp nào cho Gmail về email phản hồi (giả sử responsive = media queries).

Sau đây là các lựa chọn thay thế:

1. Lỏng bố trí - Một bố trí tỷ lệ phần trăm dựa - thường là một email cột duy nhất đó là 100%. Bạn có thể thêm cách giải quyết tối đa chiều rộng để giới hạn chiều rộng của nó trên máy tính để bàn. Điều này được hỗ trợ 100% trong tất cả các khách hàng lớn và là kỹ thuật tốt nhất cho email HTML theo ý kiến ​​của tôi.
2. Bảng được sắp xếp - đây là phần 'thích ứng' hơn đáp ứng. Hoạt động giống như các div nổi. Thuộc tính align="left" của HTML hoạt động thường xuyên hơn trong các ứng dụng email chính, vì float có hỗ trợ hạn chế.
3. Giữ bên trái - Chỉ cần thiết kế email của bạn với tất cả nội dung quan trọng ở bên trái. Thiết bị sẽ luôn hiển thị bên trái nhiều nhất 300 pixel hoặc hơn, do đó, một cột tách, văn bản bên trái, bố cục hình ảnh phải có thể phù hợp.

Bạn có thể tìm thấy một số ví dụ về chất lỏng và nổi/căn chỉnh here.

Answer 2

Bạn có thể sử dụng kỹ thuật được thấy ở đây để buộc email ở lại chiều rộng trên máy tính để bàn trên ứng dụng Gmail. Nó không phải là một giải pháp tuyệt vời vì mọi thứ sẽ khá nhỏ và chắc chắn không đáp ứng (hoàn toàn ngược lại).

Nhưng ít nhất nó sẽ ngăn không cho bố cục của bạn bị vỡ.

Bí quyết là để thêm

<div style="display: none; white-space: nowrap; line-height: 0; color: #ffffff;"> 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
</div> 

đến phần rộng nhất của email

https://css-tricks.com/override-gmail-mobile-optimized-email/