Login/Register
How to test html file for mobile responsiveness
Asked Answered
Solved htmlmobileresponsiveness
O

6

7

I need to test an html file for mobile responsiveness, but all the resources I have found to do this need a URL or a localhost, is there any way to test responsiveness with just an html file?

Odelsting answered 21/12, 2015 at 15:18 Comment(0)
L
10

Yes, simply open the .html file with Chrome or Firefox. These browsers have device mode.

You can change the screen size and see how it looks on mobile or tablet sized screens.

Leanneleanor answered 21/12, 2015 at 15:21 Comment(1)
Thank you! I was able to find developer mode in chrome and it was just what I was looking for! – Odelsting
E
3

If you save your file .html you can open with firefox or chrome, but i suggest you to use firefox developer edition https://www.mozilla.org/it/firefox/developer/

If you use Firefox you can put in the menu -> development -> flexible display (ctrl+shift+m)

In Chrome (ctrl+maiusc+i + emulation)

In this page you can select the device to view.

Extrusive answered 21/12, 2015 at 15:40 Comment(0)
D
1

I use http://www.responsinator.com Very easy and complete, several types of mobile and table devices.

Doublestop answered 20/10, 2019 at 18:31 Comment(0)
C
0

You have a lot of options to test it, but each option has it's benefits.

  1. You can minimize the browser!
  2. You can use device mode from chrome,mozilla etc
  3. You can find a lot of online responsive site testers for any resolution you want
Conciliar answered 21/12, 2015 at 15:25 Comment(0)
S
0

In my opinion, the best way to test responsiveness is in Chrome. Right click on the page and inspect. Then there will be a button to turn on responsive testing. You can choose the device to see how your page will render on all kinds of devices. This is better than resizing your window because there are slight differences in how pages render on different tablets and phones.

Stpeter answered 21/12, 2015 at 15:33 Comment(0)
D
0

There is nothing like using a real phone. As an example, px sizes differ between various phones and can cause troubles. The height of the URL bar comes into play in vertical flex scrolling when the display occupies 100%.

To do this kind of testing, you can use tunneling - products like https://serveo.net/ or ngrok.

Drooff answered 16/10, 2019 at 11:23 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.