Add automatic page scaling to fit viewport without scrolling
This commit is contained in:
nearxos
266
chromium-setup/PAGE-SCALING-SOLUTIONS.md
Normal file
266
chromium-setup/PAGE-SCALING-SOLUTIONS.md
Normal file
@@ -0,0 +1,266 @@
|
||||
# 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 `<head>`:**
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
```
|
||||
|
||||
**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.
|
||||
Reference in New Issue
Block a user