nearxos/reterminal-dm4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9c533e95f98b4ba51d829090e022155ec14d6353
reterminal-dm4/chromium-setup/PAGE-SCALING-SOLUTIONS.md

5.8 KiB
Raw Blame History

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:

# 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>:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Add responsive 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:

// 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:

/* 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:

--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:

    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:

ssh pi@10.130.60.253 "nano ~/start-chromium.sh"

Find this section and adjust:

# 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:

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.