Comments (11)
I tested this with Huawei P20 which isn't so small phone π.
I've used Chrome for Android in PWA mode and I've got screen.width = 360
and screen.height = 748
in developer tools.
from stealth.
Well, currently the UI kind of requires a minimum resolution of 500x...
and it requires CSS media queries to work; can't influence that without a custom app that uses an own webview implementation.
What is your device resolution? Is it higher than 500px in screen width? If so, there might be some glitch with the <meta name="viewport">
as I've set it to be not user-scalable and to have always a scale of 1
. Not sure whether all mobile browsers respect that setting correctly.
I could probably cheat around that behaviour with the CSS zoom: x.y
property, but this would cause so many other problems (especially with context menu, tabs, sidebars etc.) that it's a very bad idea.
from stealth.
Huawei P20
Hm... gsmarena says that the actual display resolution is 1080 x 2240 pixels, 18.7:9 ratio (~429 ppi density)
so I guess something's wrong with my assumption that scale=1
is actually a 1:1 translation to real pixels.
Could you check what the window.devicePixelRatio
value returns?
from stealth.
@cookiengineer Yes, this is weird. window.devicePixelRatio
returns 3
.
from stealth.
The devicePixelRatio = 3
actually makes sense, as the window.innerWidth * 3
is the actual display resolution then.
What happens if you change the browser/index.html
's viewport meta tag like this:
- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
+ <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
(removing the width=device-width
entry)
from stealth.
It is still same.
from stealth.
Okay, after reading the css-device-adapt specification I guess the behaviour that is wanted for the Stealth Browser is this:
<meta name="viewport" content="user-scalable=no">
... because this will actually lead to the correct behaviour when navigating around, and will render the UI in the scale factor that is given by the device. If I'm gonna implement a zoom
functionality, it has to be applied to the iframe anyways; instead of the rest of the user interface, so I guess the CSS zoom factor will then be modifiable via overridden shortcuts or gestures.
from stealth.
I pushed the fix to X0
, and so far with testing this seems to be the wanted behaviour for the user interface. It works on my legacy Android 4.4 that has a device pixel ratio of ~2.3
and with the device emulator in Chrome (which apparently just sets different zoom levels based on its profiles).
Can you confirm that the UI looks not so broken on your mobile?
from stealth.
Icons and now in one line and text has no overflows.
But I now think that the icons are too small and it is hard to click them.
from stealth.
What I don't understand in the screenshot is the relation between font-sizes. The baseline for all fonts is 16px font-size, and it's inherited by the article
element in the iframe.
Yet the radio elements in the settings are rendered in a completely different size compared to the surrounding content.
Honestly I have no idea on how to fix this without messing up the rest of the codebase. Maybe with some setting for UI scale that then is applied via zoom
on the UI elements in the header/sidebars!?
Gotta think about this one a bit.
from stealth.
It took a very long while, but I've implemented a new UI today.
The new UI will blend in a toggle button once the screen width is too small to fit in all the UI elements, which will toggle the Tab sidebar and the additional settings as an overlay.
from stealth.
Related Issues (20)
- Stealth: WS Connection Refactor HOT 2
- Stealth: Server Refactor HOT 2
- Stealth: SOCKS Connection Refactor HOT 2
- Stealth: Peerer Server Middleware HOT 1
- Stealth: Router Server Middleware HOT 2
- Covert: Results' assert() calls should be sorted as-in-file HOT 1
- Stealth: Peer Service
- Vendor Profile: CNAME Cloaking Integration HOT 1
- Stealth: SUBNET Parser and Tracer Middleware
- Stealth: Task Service
- Stealth: Search Page
- Browser: Peering Settings
- Browser: Statistics UI
- HTTP Connection: Content-Location and Content-Disposition support HOT 1
- Stealth: Asset Optimizers
- Browser: Webview Changes
- Stealth: Task Service
- Stealth: Session Service
- Stealth: Network Request Scattering
- node ./make.mjs β¦β¦reports an error
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stealth.