EN한국어

Guides / Finipage / Fixing problems

Why Your Page Looks Different in Another Browser

By the Qorlize team · Last reviewed

Finipage guide · Edit HTML files without code. Open Finipage

You check the page in Chrome and it is exactly right. Then a client sends a screenshot from their office PC, or a friend opens it on a Galaxy phone, and the heading is in a different font, a button has gone grey and rounded, or the whole page is dark. The HTML file is the same in every case. What changes is the browser engine, the fonts and settings on that machine, and whether the browser is showing a copy it saved earlier. Each cause leaves its own fingerprint, so you can usually tell which one you are dealing with.

Fonts that exist on your computer but not theirs

When CSS says font-family: "Pretendard", the browser looks for a web font the page loads itself, or a font installed on the visitor's computer. If Pretendard is installed on your machine and the page never loads it, the page looks perfect for you and different for everyone else.

The replacement comes from the rest of the list, so give the browser sensible choices on each system:

font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

Apple SD Gothic Neo ships with macOS and iOS, Malgun Gothic with Windows, and sans-serif means "whatever plain sans-serif this device has". A list with one name and no generic family falls back to the browser default, often a serif font. If text is a different shape, width or line height on one machine only, either load the font from the page or make sure the list ends sensibly. The guide on how fonts work on a web page and how to change them covers both.

Partial CSS support and different default styles

Browsers do not add new CSS features on the same day, and Safari on iOS only updates with the operating system, so a phone that skipped updates may lack something recent. Two places to check a property:

  • caniuse.com: search for the feature, for example text-wrap: balance or :has. A "partial support" cell has numbered notes underneath. Read them; partial often means "works, except in the way you are using it".
  • MDN: each CSS page has a Baseline badge. "Widely available" means it has worked in Chrome, Edge, Firefox and Safari for at least two and a half years. "Newly available" means only the latest versions are guaranteed.

For anything the layout depends on, prefer widely available features, and use newer ones only where failing quietly is acceptable.

Separately, every browser applies its own built-in stylesheet before yours. If your CSS never sets a button's font, padding, border and background, a plain <button> or <select> can look flat on Windows and rounded on an iPhone, and date fields differ completely between browsers. Set those values explicitly. For controls that must match everywhere, many stylesheets add appearance: none and style them from scratch.

The cache: why your client still sees the old page

Browsers keep copies of pages, stylesheets and images to load faster next time, so someone who opened the page yesterday may keep getting yesterday's CSS after you upload a fix. On your own computer, a hard reload skips the saved copy: Ctrl+Shift+R or Shift+F5 in Chrome and Edge on Windows, Cmd+Shift+R in Chrome on a Mac.

You cannot hard-reload someone else's browser, and phones have no easy shortcut. Instead:

  • Ask them to open the address in a private or incognito window.
  • Change the stylesheet reference when you change the file, for example style.css?v=2. The browser treats it as a new address and fetches it again.
  • If your host uses a CDN, its servers may hold the old file for a while. Look for a purge or clear-cache option in the host's dashboard.

Rule this out first. Many "Safari is broken" reports turn out to be an old stylesheet.

Zoom, display scaling and text size

If headings wrap onto extra lines on someone else's screen, their browser may be zoomed. Zoom is remembered per site, so it may have been set months ago. Ctrl+0 (Cmd+0 on a Mac) resets it in Chrome.

Windows laptops are often set to 125% or 150% display scaling. A 1920-pixel screen at 150% behaves like a 1280-pixel window as far as CSS is concerned, so a layout designed at 1440px can switch to its tablet version on an ordinary laptop. On phones, the system font size and some browsers' text scaling enlarge text, pushing long headings onto three lines. Boxes with a fixed height break first; let them grow with their content.

Forced dark mode and in-app browsers

Some browsers darken pages that have no dark design. Samsung Internet's dark mode can recolour a page, and Chrome on Android has had an automatic dark theme for web content. You get inverted backgrounds, dark text on dark panels, or logos in a white box. You can declare the schemes your page supports with <meta name="color-scheme" content="light"> and the color-scheme CSS property; MDN documents color-scheme: only light as a way to turn off Chrome's Auto Dark Theme. Handling has changed between versions, especially in Samsung Internet, so check on a real device with dark mode on.

Links tapped inside KakaoTalk, Instagram or Facebook open in an in-app browser. On Android these use the system WebView; on iOS, the same engine as Safari. They have their own cache, and on older phones an outdated engine. MDN notes that Baseline does not cover operating system web views. If a problem only appears when the link is opened from a chat, use the app's menu to open it in an external browser. If it disappears, the in-app browser is the cause, and a simpler layout is usually the practical fix.

Testing without owning every device

  • Install Chrome, Firefox and Edge. Firefox uses a different engine from the other two, so it catches different problems.
  • Safari cannot be installed on Windows. On a Mac, turn on Show features for web developers in Safari's Settings, under Advanced, to get the Develop menu. Otherwise borrow any iPhone for five minutes; browsers on iPhone, Chrome included, generally use Safari's engine.
  • Samsung Internet is a free download on Android phones, not only Galaxy models.
  • Android Studio includes a free emulator, and Xcode on a Mac includes an iPhone simulator.
  • Paid cloud testing services open your page on real remote devices; most offer a limited trial.

Chrome's device mode (F12, then Ctrl+Shift+M) changes the window size, not the engine, so it will not reproduce a Safari-only bug. The guide on checking that your HTML page works on phones covers layout problems in more detail.

A short triage checklist

  1. Ask for a screenshot, the browser and device, and whether the link was opened from an app.
  2. Hard-reload or open a private window. If that fixes it, it was the cache.
  3. Reset zoom and ask about display scaling or large text.
  4. If only the font differs, check whether the page loads it or it is just installed on your machine.
  5. If buttons or fields differ, set their styles explicitly.
  6. If the page is dark, check dark mode and the color-scheme declaration.
  7. If the layout breaks, look up recent CSS features on caniuse.com or MDN.

Small style fixes such as a button's padding, background or border can be made visually in Finipage: select the element, change its properties, save, and upload again. The font list, appearance and color-scheme live in the CSS or <head>, so edit those in a text editor such as VS Code.

Want to try it on your own file? Open the Finipage editor. It runs in your browser and your file stays on your device.

Related guides