Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Inquisitive's avatar

Headless chrome rendering as mobile view

I am trying to render html to pdf, and this is my code:

$content = $this->edit($request->jsea_card_id , $export =true);
$html = view('reports_pdf_wrapper', compact('content'))->render();

// Generating a unique temporary file name for the HTML content
$tempHtmlFile = tempnam(sys_get_temp_dir(), 'chrome_html_') . '.html';
$tempPdfFile = tempnam(sys_get_temp_dir(), 'chrome_pdf_') . '.pdf';

// Save the rendered HTML content to the temporary file
file_put_contents($tempHtmlFile, $html);

// Path to the Chrome executable, can be adjusted server environment
$chromePath = '/usr/bin/google-chrome';

// Construct the command to run Chrome in headless mode
$command = sprintf(
    '%s --headless --disable-gpu --no-sandbox --print-to-pdf=%s --window-size=1920,1080 --force-device-scale-factor=1 --user-agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36" --disable-mobile-emulation --force-device-scale-factor=1 --disable-built-in-pdf  %s',
    escapeshellcmd($chromePath),
    escapeshellarg($tempPdfFile),
    escapeshellarg($tempHtmlFile)
);

// Execute the command
exec($command);

// Option 1: Serve the PDF to the user
header('Content-Type: application/pdf');
header('Content-Disposition: attachment; filename="downloaded.pdf"');
readfile($tempPdfFile);

@unlink($tempHtmlFile); // Remove the temporary HTML file
@unlink($tempPdfFile); // Remove the temporary PDF file after serving/saving it

exit();

Despite setting window-size, disabling mobile emulation, and setting the user agent, the headless Google Chrome is still rendering as mobile.

You could directly reproduce the issue from CMD as well:

/usr/bin/google-chrome --headless --disable-gpu --print-to-pdf=output.pdf --window-size="1920,1080" https://www.getbootstrap.com/

and this is the sample output https://tmpfiles.org/dl/3993359/output.pdf

0 likes
4 replies
LaryAI's avatar
LaryAI
AI
2 years ago
Level 58

It seems like you've already taken the correct steps to ensure that Chrome renders the page in a desktop view by specifying the --window-size and --user-agent flags. However, if it's still rendering as mobile, you might want to explicitly add the --disable-device-emulation flag to your command. This flag is not actually available in Chrome command-line switches, but ensuring that no mobile emulation is being triggered could be the key.

Here's an updated version of your command with some additional flags that might help:

$command = sprintf(
    '%s --headless --disable-gpu --no-sandbox --print-to-pdf=%s --window-size=1920,1080 --force-device-scale-factor=1 --user-agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36" --disable-mobile-emulation --force-device-scale-factor=1 --disable-built-in-pdf-viewer %s',
    escapeshellcmd($chromePath),
    escapeshellarg($tempPdfFile),
    escapeshellarg($tempHtmlFile)
);

Please note that I've added --disable-built-in-pdf-viewer to ensure that Chrome doesn't try to use its built-in PDF viewer, which could potentially affect the rendering.

If this doesn't solve the issue, you might want to check if there's any CSS or JavaScript within your HTML content that could be forcing a mobile view. Sometimes, media queries or JavaScript code can alter the rendering based on the perceived device width or user agent.

Also, ensure that your HTML does not have any viewport meta tags that force mobile rendering, such as:

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

If this tag is present, try removing it or adjusting it to suit a desktop view:

<meta name="viewport" content="width=1920">

Lastly, if none of these solutions work, you might want to try using a different tool for rendering the PDF, such as Puppeteer, which provides a higher level of control over the headless Chrome instance and might give you better results.

Inquisitive's avatar

Updated the question, Tried directly from the command line as well, /usr/bin/google-chrome --headless --disable-gpu --print-to-pdf=output.pdf --window-size="1920,1080" https://www.getbootstrap.com/ but seems not working

Please or to participate in this conversation.