Remove initial-scale=1 from <meta name="viewport">

[ivan]

This saves some bytes and avoids propagating an obsolete workaround. The initial scale already defaults to 1. initial-scale=1 in viewport was propagated widely by https://css-tricks.com/probably-use-initial-scale1/ (though css-tricks itself doesn't use it). It was necessary to work around the orientation change bug in Safari for iOS < 9. iOS 9 was released in 2015 and iOS < 9 usage is extremely low in 2022.

https://webhint.io/docs/user-guide/hints/hint-meta-viewport/ seems authoritative about it no longer being necessary.

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. All changesets should be patch until SvelteKit 1.0

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9c0de24

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Rich-Harris]

TIL! Thanks

[DougInAMug]

Hey @ivan I don't think the initial-scale=1 workaround is obsolete yet! I'm working on a project, and everything behaves fine on Firefox, but not so when I looked on my mobile. I can confirm the issue shown in the screencast happens on the following Chrome-based browsers:

• Linux Pop!_OS 22.04 LTS:
  • Chromium Version 117.0.5938.92 (Official Build) snap (64-bit)
• Android 13
  • Brave 1.50.114, Chromium 112.0.5615.49
  • Vanadium 117.0.5938.60

Screencast.from.27-09-23.10.41.10.webm

Can you confirm that this is an issue with Chrome handling the viewport meta tag?

[DougInAMug]

Google writes on their lighthouse page:

Lighthouse doesn't check that width equals device-width. It also doesn't check for an initial-scale key-value pair. However, you still need to include both for your page to render correctly on mobile devices.

and the example they provide as best practice is:

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

Adding back initial-scale=1 seems a bit easier than changing Chrome 😅

[DougInAMug]

The shift in viewport scaling in Chrome when scale is unset:

Screencast.from.27-09-23.14.33.39.webm

[DougInAMug]

I'm using the <svelte:head> special tag to workaround this issue:

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