Adjusting zoom for lower resolution screens

I have been developing this website on a 4k monitor. Whenever I test on smaller screens, specifically the ones with lower resolution, such as office gear, laptops, or older hardware, I got the feeling that everything becomes squished. That was until now, because I devised a not so elegant solution to simply zoom everything out on lower resolutions. This will not fix the tablet view, it will not push the site into mobile view, it will simply adjust zoom based on resolution. There is a sure way to check if we are not on mobile according to squarespace, and if we are indeed not on mobile, the zoom factor will be adjusted for lower resolutions. With lower resolutions I mean screens which are generally less that 2200 pixels wide, because the standard page width is 2200px. Please note that this code does not work in the footer, it has to be in the header code injection.

HTML:

JAVASCRIPT:

<script>
document.addEventListener('DOMContentLoaded', function () {
//mobile mode check
const headerActions = document.querySelector('.header-actions');
let isTouch = false;
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
}
checkHeader();
//adjust zoom based on resolution
if (!isTouch) {
function adjustZoom() {
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
console.log(screenWidth);
let zoomFactor = 1;
if (screenWidth <= 1024) {
zoomFactor = 0.67;   
} else if (screenWidth <= 1366) {
zoomFactor = 0.80;
} else if (screenWidth <= 1920) {
zoomFactor = 0.90;
} else if (screenWidth >= 2560) {
zoomFactor = 1;
}
document.body.style.zoom = zoomFactor;
}
adjustZoom();
window.addEventListener('resize', adjustZoom); //costly, optional, good for testing
}
});
</script>

CSS:

(In September 2024:)

1. Mobile Resolutions (Portrait and Landscape)
Mobile devices often have resolutions around 300-800 pixels in width.

• iPhone SE (1st gen), iPhone 5, iPhone 5S (Portrait) - Very small, older models: Width: 320px, Height: 568px

• iPhone 6/7/8, iPhone SE (2nd gen) (Portrait): Width: 375px, Height: 667px

• iPhone X, iPhone 11 Pro, iPhone 12 Mini (Portrait): Width: 375px, Height: 812px

• Google Pixel 4, Samsung Galaxy S10 (Portrait): Width: 412px, Height: 869px

• iPhone 6/7/8, Google Pixel 4 (Landscape): Width: 667px, Height: 375px

• iPhone X, iPhone 11 Pro, Samsung Galaxy S10 (Landscape): Width: 812px, Height: 375px

  Samsung Galaxy Fold (Folded) - Large, experimental device: Width: 720px, Height: 1280px

• iPhone 16 Plus, newest model with 460 pixels per inch : Width: 2796px, Height: 1290px
  

2. Tablet Resolutions
Tablets tend to range between 768-1280 pixels in width, both in portrait and landscape.

• iPad Mini (Portrait) - Older and smaller iPads: Width: 768px, Height: 1024px

• iPad Mini (Landscape): Width: 1024px, Height: 768px

• iPad Pro 11-inch (Portrait): Width: 834px, Height: 1194px

• iPad Pro 12.9-inch (Portrait) : Width: 1024px, Height: 1366px

• Microsoft Surface Pro 7 (Landscape) - (Common Windows-based tablets): Width: 1280px, Height: 800px
  

3. Laptop and Desktop Resolutions
Laptops and desktops have a wide range of resolutions, with common widths from 1280px to 3840px.

• Small Laptops (13") - Common entry-level laptops: Width: 1366px, Height: 768px

• Mid-sized Laptops (15") - Standard for many laptops: Width: 1440px, Height: 900px

• Larger Laptops (17") - High-end, gaming, or design-focused laptops: Width: 1600px, Height: 900px

• Full HD Laptops/Monitors - The most common resolution for both laptops and monitors: Width: 1920px, Height: 1080px

• Quad HD Laptops/Monitors - Used by gamers, designers, and productivity users: Width: 2560px, Height: 1440px

• Ultra HD 4K Monitors - For high-end desktops and professional displays: Width: 3840px, Height: 2160px

• Ultra-wide Monitors (21:9 Aspect Ratio) - For productivity, gaming, and creative work: Width: 3440px, Height: 1440px

• Super Ultra-wide Monitors (32:9 Aspect Ratio) - Extremely wide setups: Width: 5120px, Height: 1440px
  

4. TV Resolutions
While not typical for web design, some users access websites on TV screens. Here's a list of TV resolutions.

• HD Ready (720p) - Lower-end HDTVs: Width: 1280px, Height: 720px

• Full HD (1080p) - Most “common” TV resolution: Width: 1920px, Height: 1080px

• 4K Ultra HD TVs - Common on modern high-end televisions: Width: 3840px, Height: 2160px

• 8K Ultra HD TVs - Cutting-edge TVs, still rare: Width: 7680px, Height: 4320px

5. Summary of Key Screen Resolutions:

• Mobile (Small): 320x568 (older phones like iPhone SE 1st gen)

• Mobile (Medium): 375x667 (standard iPhones and Android devices)

• Mobile (Large): 412x869 (large Android devices like Google Pixel)

• Tablet (Small): 768x1024 (small iPads)

• Tablet (Large): 1024x1366 (iPad Pro)

• Laptop (Small): 1366x768 (small laptops)

• Laptop/Monitor (Full HD): 1920x1080 (common laptops and monitors)

• Laptop/Monitor (Quad HD): 2560x1440 (high-end displays)

• Desktop Monitor (4K): 3840x2160 (professional and high-end monitors)

• Ultra-wide Monitors: 3440x1440 (extra-wide productivity monitors)

In other words, if any squarespace affiliates are reading this, please allow us to control the break point for desktop/tablet/mobile (with a single variable), and bring the tablet editing view back.