1. ActionTiles Forum
  2. Browsers Tablets Phones
  3. Questions & Discussions
0
Answered: Discussion Open

Preview on PC as various tablet screen size?

Bryan Mack 6 years ago in Browsers Tablets Phones • updated by Kevin1 6 years ago • 3

I'm doing my action tiles development from a PC, and am developing for a few different devices with different screen sizes. WHen on the PC, is there some kind of option that says "Preview for an 8" screen" (or, preview Amazon Fire 8)...  and then I could "Preview for a 9.7" screen" (or, preview iPad 6th Gen), etc. ? this would be helpful as I don't need every device in front of me -- or, when my panel is mounted, I can see what the adjustment will look like on various panels in my home.

Answered: Discussion Open
Terry (ActionTiles) (Co-Founder) 6 years ago

Great idea, Bryan... 


This is actually built-into Chrome & Firefox browser debuggers (well... IE and Edge too, I think).


I recommend Chrome.

  1. If you have enough room on your monitor, open up a second browser window. That way you can use your regular browser window to do the building, while seeing the "preview" in this other window. 
  2. Press Ctrl-Shift-I or F12 to toggle the debugger panel on.
  3. then Ctrl-Shift-M (or the  icon) to activate the "Device Emulation" view.

    A detailed tutorial on the Device Emulation: http://www.joostrap.com/support/tutorials-videos/204-testing-your-responsive-web-design-with-chrome-developer-mobile-emulator-tool



A drop-down list is provided to select from a few predefined mobile devices (e.g., iPad 2, etc), but there aren't many options shown and, they don't give the most accurate preview for this purpose.

Instead, choose the "Responsive" option. This will let you custom size the preview-viewport manually. You can give it a name and save it for future usage.

You can't just use the physical resolution of the Tablet(s) however... such as 1280x800 for a landscape Amazon Fire. There is a DPR (device pixel ratio) that affects the real device. If you do not know the "device pixel ratio" for your target device (you can search Google for it); you can just use the handles to drag the preview window to the desired size.


But if you know the physical resolution and ratio, just calculate accordingly:


Some examples:

TabletPhysical Resolution, RatioResponsive Size setting
Amazon Fire HD81280x800, 1.33960x600
Samsung Galaxy Tab A 10.1"1920x1200, 1.51280x800 or 960x600 (test which has the best match)
...


 Alternatively, you can Google and find websites or browser plug-ins that simulate the browser viewport. I'm not sure they are as flexible or efficient as the browser-debugger view.

+1
Bryan Mack 6 years ago

Thanks for the detailed response, awesome!

+2
Kevin1 6 years ago

I don't know if this is easier, but an option at least.  I think I used this chrome extension to resize chrome windows a while back: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en

Lately I just pull the tab out of chrome into a new window and resize that visually until it matches the look of my wall mounted HD8.

Customer support service by UserEcho