How do I troubleshoot a website issue that only shows up on my iphone?

I only have one ios device, and my portfolio isn’t aligned correctly on it. Everything else is fine. just this iphone. It happens in chrome and safari.

How do I trouble shoot it to find out which css rules are causing an issue? Its really inconvenient to push to github pages just to try out a guess fix that hasn’t worked.

should be more like

Cheers

mark

Not sure how you would find the problem. Maybe using some kind of CSS reset will work (Though that would mean pushing to gh-pages to probably find out that this doesn’t work :slight_smile: )?

I have normalize linked. I’m not certain it is the css now as its 2 browsers on the iphone, but its fine on everything else I have seen it on.

maybe flexbox inside flexbox inside home made slider inside home made tabs is just asking too much and this is what I get for saying you don’t need Bootstrap!

Just found a genius way to test this (hope it works for everything and everyone).

  • install lite-server globally: npm i -g lite-server (or basically anything that uses localhost)
  • find your ip address
  • find the port the server runs on
  • on mobile open <ip-address>:<port>

With browser-sync it automatically reloads as well!!! :grinning:

2 Likes

oh nice one ben, i’ll give that a try later. I had to move on.

I guess this is a remote emulator then? make changes on PC files, refresh phone on that server address and port?

1 Like

Well, I found its firs limitation: it doesn’t work with the angular cli :disappointed:

Anyway, when you use lite-server (which includes browser-sync) you just open the url once and it refreshes automatically.

thats ok I haven’t got to angular yet anyway. Just about know what it is :slight_smile:

Just got it to work with Angular as well :wink:

This is seriously awesome, I can now have my tablet as preview, so I don’t have to fit multiple windows on my laptop screen. And I can also directly see how it looks on mobile.

Thanks for asking this question!

1 Like

Got around to this today. It took some firewall fettling, both on the PC and on the router, but it’s working.

Cheers @BenGitter I can trouble shoot IOS now :thumbsup:

2 Likes

Google Chrome: Ctrl+Shift+I (Developer Tools) > Ctrl+Shift+M (Toggle Device Toolbar) > Select iPhone from dropdown > Make changes to your code until its fixed.

Hi @sahilsunny

Thanks for the tip, unfortunately my issue doesn’t show up that way. I think the device views in browsers only really show how the website looks like at that size, they don’t emulate the device OS or it’s browser :frowning:

Sorted!

Although I think I’ve been connecting to IIS not server light :blush:

1 Like