device-dpi and pixel sizing

oros · ‎04-12-2010

Creating a thread for an inquiry started via Twitter.

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" id="viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1.0,user-scalable=no" />
		<style type="text/css">
			body {
				font-size: 10px;
			}

			div {
				height: 2em;
			}
		</style>
	</head>
	<body>
		<div>This is some text.</div>
		<div>This is more text.</div>
	</body>
</html>

Hello g1uth, I did my best recreating the issue you noted on Twitter however I'm not sure that I'm seeing incorrect behavior. Could you please give the above code a review to see if this is what you had in mind? I'm seeing the em reflect the px size set appropriately, but I'm not sure if that's what you had in mind.

Please note that I will be unavailable between May 19th and June 4th. Sincere apologies for any delays during this time. I will do my best to follow-up as soon as I am able.

Erik Oros
BlackBerry Development Advisor
@WaterlooErik

gluth · ‎09-23-2009

Set the body font size to 14pt, it should have the same size on all devices (physical size) or at least between device and ripple simulator.

Found my post helpfull? Like it! It solves your trouble? Help others and accept it as solution. Search before asking.
My apps: Secret Cod3s | Should my tablet be banned?
--
Jakub Nietrzeba
PGS Software S.A.
Your reliable partner in Poland - IT Outsourcing - BlackBerry, iPhone, Web and Standalone applications

gluth · ‎09-23-2009

OK, I think that I have overdebugged myselft. There is no pixel difference between device, simulator and emulator,even with point based font. My rant was sourced in visual comparision between physicall 9860 and physical Dev 10 Alpha - side by side. Even, when used points and ems they got different size of font. On dev 14pt font was hard to read (to small), on 9860 it was perfectly fine.

I don't know if this can be counted as an issue or not.

BTW. It would be good to have 'emulate device dpi' button in Ripple to match my screen dpi against device dpi (to show emulated device with real size but with limited dpi) - it sound complicated - result would be similar to this site: http://phone-size.com . It would be handy to see full device with full app layout.

Found my post helpfull? Like it! It solves your trouble? Help others and accept it as solution. Search before asking.
My apps: Secret Cod3s | Should my tablet be banned?
--
Jakub Nietrzeba
PGS Software S.A.
Your reliable partner in Poland - IT Outsourcing - BlackBerry, iPhone, Web and Standalone applications

oros · ‎04-12-2010

I think I'm following. Inherently, Dev Alpha has a higher PPI in a similar screen size to the 9860 (i.e. diagonal ~4.8" vs. ~3.7".) So a 14px font should be expected to appear smaller, as would sizes based on em as em is reflective of the font size too. Is that about right? In this case, the difference would be expected.

To someone like myself that wouldn't know exactly how to implement that though, complicated does sound appropriate :-) Considering my monitor has its own PPI, there would need to be some fine-tuning going on.

For myself, I generally find resizing the Ripple view area (CTRL + Mouse Wheel) to get the screen "similar" to the actual size of the device does a decent job of showing me what it would actually look like. There will undoubtedly be differences from Ripple to a real device, though the dev teams are trying to minimize what they can.

It's definitely a feature request that can be made here:

https://github.com/blackberry/Ripple-UI/issues?state=open

Please note that I will be unavailable between May 19th and June 4th. Sincere apologies for any delays during this time. I will do my best to follow-up as soon as I am able.

Erik Oros
BlackBerry Development Advisor
@WaterlooErik

gluth · ‎09-23-2009

Points not pixels - that was the main reason to go with point based design - and stay away from pixels. The goal was to have good readablity of texts across all devices. Point should be the same, regardless screen PPI.

I think I will create a pack of 'override' styles for various devices, to have similar, fine-tuned layout.

Well, it's not as complicated as it would be, in settings there would be one drop down with screen diameter (oh well this could be also read from drivers settings) - knowing screenx and screeny will give us ppi, knowing device ppi dividing one across second one will create zoom factor. I wonder if iframe can be transformed with one of those famous html5 css3 transformations - if yes the only complicated thing would be to creat catch name and nice icon design.

I have found ctrl+scroll trick, but all interface is scalled also and it is not as easy as single click on one of the panels. Click - detail, click - overview.

Found my post helpfull? Like it! It solves your trouble? Help others and accept it as solution. Search before asking.
My apps: Secret Cod3s | Should my tablet be banned?
--
Jakub Nietrzeba
PGS Software S.A.
Your reliable partner in Poland - IT Outsourcing - BlackBerry, iPhone, Web and Standalone applications

Welcome!

Web and WebWorks Development

device-dpi and pixel sizing

Re: device-dpi and pixel sizing

Re: device-dpi and pixel sizing

Re: device-dpi and pixel sizing

Re: device-dpi and pixel sizing