HTML 전자 메일에서 기본 Android 패딩 제거

Question

일부 요소가 뷰포트의 전체 너비를 늘리는 반응 형 전자 메일 레이아웃이 있습니다.

Android (네이티브 메일 및 4.4 이상의 Gmail 앱) 양쪽에 ~ 10px 패딩이있는 것으로 보입니다. 이것을 부정하는 재산이나 트릭이 있습니까?

(이 질문은 이미 어딘가에 질문해야했지만, 검색은 완전히 관련없는 HTML 전자 메일 여백 문제 만 제공하므로이 메시지가 중복되면 미안합니다.)

몸 마진을 취소

을 시도했다. 이것은 레이아웃에 영향을 주었지만 문제를 해결하지는 못했습니다. 다음 코드의 결과는 단순히 왼쪽의 패딩을 제거했지만 네이티브 앱에서 오른쪽의 패딩을 두 배로 만듭니다.

html, body{ 
    padding:0 !important; 
    margin:0 !important; 
    width:100% !important; 
} 
div[style*="margin: 16px 0"] { 
    margin:0 !important; 
    font-size:100% !important; 
    width:100% !important; 
} 

Gmail 앱에서 변경 사항이 없습니다.

더 많은 통찰력

몸에 관계없이 폭 설정의 뷰포트에서 동일한 폭을 유지 보인다. 너비를 1000px로 설정하면 전자 메일은 양쪽 여백이있는 영역에 맞게 축소됩니다. 여백은 몸체의 여백 : 0을 사용하여 취소 할 수 있지만 몸체는 동일한 크기를 유지하므로 오른쪽에 여분의 공간이 나타납니다.

클라이언트가 주어진 너비에 맞게 전자 메일 크기를 프로그래밍 방식으로 조정한다고 생각합니다. 이 문제를 해결할 수있는 유일한 방법은 어떻게 든 클라이언트를 속이는 것입니다. 아무것도

Answer 1

문제는 단순히 여백, 안드로이드 4.4 전자 메일 클라이언트가 이렇게도 전에, 모든면에서 여백 값을 적용 (단, 오른쪽에 그 사실 보이지 않음)입니다 ... 아직 일한 것 같다 당신의 전자 메일 메시지가 렌더링되어 전체 뷰포트가 이미 엉망입니다.

아래 블록을 통해 정규화 할 수 있습니다.

body { margin:0 !important; } 
div[style*="margin: 16px 0"] { margin:0 !important; font-size:100% !important; } 

https://blog.jmwhite.co.uk/2015/09/19/revealing-why-emails-appear-off-centre-in-android-4-4-kitkat/