2013-08-22 13 views
10

Tôi đang đặt một email để xem trên các trình duyệt và nền tảng di động và hầu hết tất cả đều diễn ra tốt đẹp. Nó được đặt ra trong các bảng, sử dụng kiểu dáng nội tuyến, vv Tuy nhiên, mặc dù một truy vấn phương tiện truyền thông có tác dụng với chiều rộng tối đa 600px, ứng dụng Gmail trên ít nhất một và một Android khác tôi có quyền truy cập là chọn thay đổi kích thước hình ảnh và bố cục để vừa với khu vực của nó thay vì sử dụng truy vấn phương tiện hoặc cho phép nó vừa với cửa sổ bình thường, một trong hai cách này sẽ ổn.Có phương pháp tắt tính năng Tự động thay đổi kích thước của ứng dụng Gmail trong bố cục của email không?

Để sử dụng cá nhân, tôi có thể 'tắt tự động định lại kích thước' trên điện thoại của mình và sau đó email sẽ xuất hiện như trong trình duyệt.

Có phương tiện nào để yêu cầu ứng dụng Gmail không tự động thay đổi kích thước từ kích thước email hoặc sử dụng truy vấn phương tiện thay thế không?

Trả lời

10

Như Google làm bản thân (! Sic) here bạn nên thêm một hack nhỏ trên đầu trang của mẫu của bạn, ngay sau thẻ <body> của bạn:

<!-- Gmail hack --> 
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff; line-height:0; width:600px !important; min-width:600px !important; max-width:600px !important;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div> 
<!-- /Gmail hack --> 

Kể từ Gmail và Inbox sẽ bỏ qua các display:none, hack sẽ chỉ ảnh hưởng đến hai khách hàng đó.

+0

hoạt động như một nét duyên dáng – rusly

+0

nó là gì trong mã này ???? nó giúp não tôi không bị nổ tung. Cảm ơn! Matteo! – Vincent

+0

nó hoạt động cho ứng dụng gmail ios, nhưng không cho ứng dụng gmail android – duchuy

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

Sau đó thiết lập các thuộc tính style trên một hình ảnh (công trình 1px gif) kéo dài toàn bộ chiều rộng của trang (style="min-width:600px;"). Tất cả mọi thứ sẽ được đặt ra một cách chính xác, và nó sẽ được cuộn.

Gmail nói chung không hỗ trợ truy vấn phương tiện hoặc thẻ kiểu nói chung, đó là lý do tại sao chúng tôi phải di chuyển mọi thứ nội tuyến.

+0

Thật không may, tôi sẽ trải qua CRM làm trung gian cho chiến dịch email và tôi thực sự không thể đặt bất kỳ điều gì vào ''. Mặc dù tôi không thấy điều đó thực sự hoạt động tốt trong thử nghiệm của tôi dù sao đi nữa, có cách nào để sử dụng (hoặc tạo hiệu ứng tương tự) một thẻ meta giống như bên ngoài '' và không phá vỡ internet? – Abernasty

+0

Woah, ok. Tôi hiếm khi thay đổi đầu của tôi, vì vậy bạn được phép ít nhất có một 'toàn cầu' 'cho tất cả các email của bạn? Bạn có thể đặt các thẻ meta bên ngoài đầu nhưng tôi cũng không khuyên bạn nên sử dụng nó. Nếu bạn chạy nó thông qua email trên axit hoặc litmus bạn có thể xem nó trông như thế nào. Litmus miễn phí trong một tuần và bạn có thể thấy tất cả khách hàng. Bạn thực sự muốn có thẻ khung nhìn đó nếu bạn đang thực hiện truy vấn phương tiện/email phản hồi. Sideways cuộn trên thiết bị di động là không lớn. Ứng dụng thư mặc định hỗ trợ truy vấn phương tiện và thẻ kiểu nếu bạn muốn kiểm tra. – zazzyzeph

+0

Yea, tôi đang sử dụng Email trên Acid, thật không may, nó trông giống như khi trải qua các điều kiện thay đổi của CRM, không có thiết bị di động nào được giải thích đúng cách. Tuy nhiên, tôi có thẻ viewport ở trên cùng của phần thân. – Abernasty

-1

Tôi vừa thêm kiểu = "min-width: 290px;" vào bảng ngoài cùng của tôi, đó là kích thước nhỏ nhất mà email phản hồi của tôi xem và di chuyển các khối của tôi xung quanh và không tự động thay đổi kích thước. Điều này có nghĩa là trong Ứng dụng Gmail, email hiển thị dưới dạng toàn bộ email.

+0

Bạn lấy 290px từ đâu? –

1

Lấy cảm hứng từ css-tricks.com, khối mã này đã giải quyết được sự cố của tôi. Đặt ngay trước </body>.

<table class="gmail-app-fix"> 
    <tr> 
     <td> 
      <table cellpadding="0" cellspacing="0" border="0" align="center" width="600"> 
       <tr> 
        <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;"> 
         <img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/> 
        </td> 
        <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;"> 
         <img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/> 
        </td> 
        <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;"> 
         <img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

(Thử nghiệm với Gmail 6.0 và Inbox 1.20 trên Android 5.0.1, độ phân giải 720x1280 (hoạt động trên cả hai chiều dọc và ngang)).

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