1

I need to test the Ionic 3 app on a low-resolution device. But I don't have a low-resolution device.Can you tell me how to do that in the chrome dev tools?

Low-Resolution device: Zte

Screen Size: 5.0 Inches, 480 x 854 pixels

enter image description here

Sampath
  • 63,341
  • 64
  • 307
  • 441
  • You can use remote debugg using chrome device inspect feature, – rashidnk Nov 05 '17 at 05:33
  • Yes, But I don't have a low-resolution device no. That is the issue here. That is why I need to simulate it on the browser.@rashidnk – Sampath Nov 05 '17 at 05:45
  • You mean small screen device? – Duannx Nov 06 '17 at 02:44
  • I need to simulate `Screen Size: 5.0 Inches, 480 x 854 pixels`.In other words resolution. @Duannx We cannot give pixels as it is since it is different than the `retina` screen's units. – Sampath Nov 06 '17 at 02:53
  • I think it is hard to simulate `retina` in chrome dev tool. We only can change pixel of screen by clicking in `responsive` option or add an other device by clicking `edit` – Duannx Nov 06 '17 at 03:07
  • Yes, But this won't work `480 x 854`. We need to convert it to device's unit. How to do that? @Duannx – Sampath Nov 06 '17 at 03:11
  • I afraid of that chrome can not simulte `retina` if we give custom pixels. Choose device from exits list is the only way. – Duannx Nov 06 '17 at 03:24
  • Again I'll have the same problem no? Which device should I choose to match the `Zte`? @Duannx :https://www.mobileciti.com.au/zte-telstra-4gx-plus-grey?gclid=Cj0KCQjwgIPOBRDnARIsAHA1X3Rs9bT99-PYjF0qTddxkXdxi-oFagMNqyUm_m4EpypNtm0oyvwPVeoaAlzNEALw_wcB – Sampath Nov 06 '17 at 03:29
  • Since chrome device list does not have `Zte`, you have 2 choices now: 1. Edit the pixels. As i say above, you just simulated the `screen size` not the `retina`. So some style you set with `px` may not same as real device. 2. Give up with chrome dev tool and use some online test tool. That is all i can do in this situation – Duannx Nov 06 '17 at 03:48
  • If I give the pixels then it won't work.You can see that the height is huge `854`. I strongly believe there must be a conversion of pixels to retina units and vice versa.Yes, this won't work perfectly like device. But at least we should find out a method to simulate it like default chrome dev tool devices.e.g. `Galaxy S5` has resolution `1920 x 1080`. But chrome dev tool gave it as `360x640` for us. So there must be a formula for that? @Duannx – Sampath Nov 06 '17 at 04:18
  • The problem of online tool is I cannot debug it no? @Duannx – Sampath Nov 06 '17 at 04:19
  • Galaxy S5 have `16:9` ratio so `640x360` is same as `1920x1080` in screen size but not the `retina`. What do you mean `won't work`? I tried editing the pixels and i recive the screen with the size i want. Online tools i know can not debug so we have to accept that no tool is perfect. We need make a choice. – Duannx Nov 06 '17 at 04:32
  • I think we need that kind of ratio here too. Any idea how to do that?You can see that we cannot see the full page when I set up it. @Duannx https://i.imgur.com/beuNUlC.png – Sampath Nov 06 '17 at 08:44
  • I have no idea about that. But it show 75% to fit your window. Just smaller but the ratio will not change – Duannx Nov 06 '17 at 16:02
  • @Sampath we need pixel density of device or ppi which doesn't seem to be available and also not enough info to calculate. Then we can get logical pixel resolution – Suraj Rao Nov 29 '17 at 13:49
  • Is this not enough? @SurajRao http://www.ztemobiles.com.au/A462.htm – Sampath Nov 29 '17 at 13:59
  • Maybe https://community.giffgaff.com/t5/Blog/Pixel-Density-Pixels-Per-Inch-PPI-Explained/ba-p/9252950 will help . – Suraj Rao Nov 29 '17 at 14:15
  • Can't you construct an answer here? @SurajRao – Sampath Nov 29 '17 at 14:25
  • @Sampath if I find the ppi i can.. otherwise as i said not enough info – Suraj Rao Nov 29 '17 at 14:27
  • Yes, It is there. Here it is : `Pixel Density (In PPI) ~ 196PPI`. See: https://www.pdevice.com/product/zte-blade-a462-price-specs @SurajRao – Sampath Nov 29 '17 at 14:34
  • 1
    Ok.. that makes ~1.3 DPR.. will post answer – Suraj Rao Nov 29 '17 at 14:43

1 Answers1

2

As specified in the comments, the pixel density is 196PPI.

The device pixel ratio = 196/150=~1.3

The logical resolution is screen size in pixels/dpr i.e. (480x854)/1.3 = (369×657) width and height.

Sampath
  • 63,341
  • 64
  • 307
  • 441
Suraj Rao
  • 29,388
  • 11
  • 94
  • 103