Search code examples
ioscssipadmobile-safari

How do I remove or reduce the margins when printing from iPad safari using css?

I am trying to remove or at the very least reduce the page margins when printing a webpage from an iPad. I have attempted various forms of the @Page directive as indicated by MDN, but it has had no effect. Examples of attempts:

@page {
    margin: 0.5cm;
}

Also:

@page 
{
    size: auto;   
    margin: 0mm;  
}

body 
{
    margin: 0px;  
}

I then proceeded to try to find some documentation of whether or not iOS safari supports the @page directive, but all I found was a SO question from 2009 that said safari in general doesn't support it, which to my understanding is no longer the case, and regular safari does in fact support it.

So, is it possible? Am I doing something wrong with @page that causes it to ignore margin? Or does safari for iPad simply ignore any attempts to change the margins via css?

Solution

  • Unfortunately, it looks like what you are trying to achieve is not possible.The Safari CSS Reference only lists basic support for Paged Media and is missing support for the size property. As a result, Safari (desktop and mobile) does not support applying margin or size properties within the @page rule.

    I also did some additional testing with Safari Mobile for iOS 8 in regards to printing with the simulator. I was able to confirm that it is not possible to modify the paper margins or remove the print footer at this time.