# Page Scaling Solutions for Chromium Fullscreen ## Problem When Chromium loads in fullscreen, the page content requires scrolling (scrollbar appears) instead of fitting the viewport. ## Solutions ### Solution 1: Automatic Zoom via Script (Current Implementation) ⭐ The startup script now automatically zooms out the page after it loads using `xdotool`. **How it works:** - Waits for Chromium to load - Sends keyboard commands to zoom out (Ctrl+-) - Adjusts zoom level to fit content **Configuration:** Edit `~/start-chromium.sh` and adjust the zoom-out loop: ```bash # Change the number of zoom-out commands (currently 3) for i in {1..3}; do # Increase number for larger pages xdotool key --window $WINDOW_ID ctrl+minus sleep 0.5 done ``` **Pros:** - Works with any page - No page modification needed - Easy to adjust **Cons:** - Requires xdotool - May need fine-tuning for different page sizes --- ### Solution 2: Edit the Page Itself (Best Long-term Solution) If you control the web page at `http://127.0.0.1:8080`, add responsive CSS: **Add to your HTML ``:** ```html ``` **Add responsive CSS:** ```css /* Make page fit viewport */ html, body { width: 100vw; height: 100vh; overflow: hidden; margin: 0; padding: 0; } /* Scale content to fit */ .container { width: 100%; height: 100%; transform-origin: top left; } /* Use CSS media queries for different screen sizes */ @media (max-width: 1280px) { .container { transform: scale(calc(100vw / 1280)); } } ``` **Pros:** - Most reliable solution - Works without external tools - Better user experience **Cons:** - Requires access to edit the page - May need to redesign layout --- ### Solution 3: JavaScript Injection Inject JavaScript to auto-scale the page. **Create a user script:** ```javascript // Auto-fit page to viewport (function() { function autoFit() { const vw = window.innerWidth; const vh = window.innerHeight; const pw = document.body.scrollWidth; const ph = document.body.scrollHeight; const zoom = Math.min(vw/pw, vh/ph, 1.0); if (zoom < 1.0) { document.body.style.transform = 'scale(' + zoom + ')'; document.body.style.transformOrigin = 'top left'; document.body.style.width = (100/zoom) + '%'; document.body.style.height = (100/zoom) + '%'; document.body.style.overflow = 'hidden'; } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', autoFit); } else { autoFit(); } window.addEventListener('resize', autoFit); setTimeout(autoFit, 2000); })(); ``` **To use:** 1. Install a userscript extension (like Tampermonkey) 2. Create a script that runs on `http://127.0.0.1:8080` 3. Paste the JavaScript above **Pros:** - Works automatically - No page modification needed - Can be fine-tuned **Cons:** - Requires browser extension - May conflict with page JavaScript --- ### Solution 4: Chromium User Stylesheet Use a custom CSS file to override page styles. **Location:** `~/.config/chromium/Default/User StyleSheets/Custom.css` **Content:** ```css /* Hide scrollbars and scale content */ html, body { overflow: hidden !important; width: 100vw !important; height: 100vh !important; } /* Scale body to fit */ body { transform: scale(0.8) !important; /* Adjust value as needed */ transform-origin: top left !important; width: 125% !important; /* Inverse of scale */ } ``` **Pros:** - Simple CSS solution - No JavaScript needed **Cons:** - Fixed scale value (not dynamic) - May break some layouts --- ### Solution 5: Chromium Zoom Flag Use Chromium's force-device-scale-factor flag. **Add to startup script:** ```bash --force-device-scale-factor=0.8 # Adjust value (0.5-2.0) ``` **Pros:** - Built-in Chromium feature - Simple to use **Cons:** - Affects entire browser, not just page - May make UI elements too small --- ## Recommended Approach ### For Immediate Fix (No Page Editing): ✅ **Use Solution 1** (already implemented in script) - Automatic zoom via xdotool - Works immediately - Adjust zoom level in script if needed ### For Long-term Solution: ✅ **Use Solution 2** (Edit the page) - Add responsive viewport meta tag - Add responsive CSS - Best user experience - No external dependencies --- ## Testing and Adjustment ### Test Current Implementation: 1. Reboot or restart Chromium: ```bash ssh pi@10.130.60.253 "pkill chromium && sleep 2 && DISPLAY=:0 ~/start-chromium.sh" ``` 2. Check if scrollbar is gone 3. Verify content fits viewport ### Adjust Zoom Level: If content is too small or still scrolling: **Edit the script:** ```bash ssh pi@10.130.60.253 "nano ~/start-chromium.sh" ``` **Find this section and adjust:** ```bash # Increase number for more zoom-out (smaller content) for i in {1..5}; do # Changed from 3 to 5 xdotool key --window $WINDOW_ID ctrl+minus sleep 0.5 done ``` **Or decrease for less zoom-out:** ```bash for i in {1..2}; do # Less zoom-out xdotool key --window $WINDOW_ID ctrl+minus sleep 0.5 done ``` --- ## Troubleshooting ### Scrollbar Still Appears: 1. Increase zoom-out commands in script 2. Check if page has fixed-width elements 3. Consider editing the page CSS ### Content Too Small: 1. Decrease zoom-out commands 2. Or use zoom-in: `xdotool key --window $WINDOW_ID ctrl+plus` ### Zoom Not Working: 1. Verify xdotool is installed: `which xdotool` 2. Check window ID is found: Add `echo $WINDOW_ID` to script 3. Try manual test: `xdotool key ctrl+minus` --- ## Current Script Location - **Device**: `~/start-chromium.sh` - **Local**: `chromium-setup/start-chromium.sh` The script now includes automatic page scaling via xdotool zoom commands.