267 lines
5.8 KiB
Markdown
267 lines
5.8 KiB
Markdown
# 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.
|