Level 11
Test with Chrome developer tools. Press Ctrl+Shift+I (or Cmd+Opt+I on a Mac) while in Chrome to open them.
Mar 9, 2017
11
Level 5
Searching for hints/tips for making website work on smartphones.
So I have built a task list app, looks great on the computer, but has so many hickups on a smartphone... I didn't find much on this subject in the Laracast guides.
Some precise questions:
- How to test how your website works and looks on a smartphone during development? (including all limitations like fonts, gestures etc.)
- How to streamline fonts on all devices?
- I read that I need to set
inputto font size16pxto make it stop zooming to the input form automatically on iPhones. But does that mean that I'd have to rewrite my CSS main font sizes? My<body>is set to font-size 14px, and everything else is using EM's...
Any hints or tips much appreciated!
Level 75
Correct media queries.
Level 5
@bwrice Thanks for the hint! But the thing with chrome dev-tools is that it does not change my fonts, while on iPhone the fonts look different! Also, the size of some components seem bloated on my iPhone, while in the iPhone mode on dev-tools it looks fine...
BTW do I really need to set my base font 16px on the body just to make it stop zooming on inputs? Having just the input font-size bigger than all the rest looks really ugly...
Level 75
Browserstack
Level 5
@jlrdw Thanks! This is a great tool! It seems that the iPhone Safari user agent custom CSS brings forth some tricky CSS which doesn't appear on the computer.
Is there any CSS reset for mobile you can suggest?
I found this great plugin called 'Reboot' by bootstrap! http://v4-alpha.getbootstrap.com/content/reboot/
I wonder if I can install just this, without bootstrap.
Level 75
I do not use bootstrap I write my own media queries. But bootstrap should have a means to write for normal desktop at the same time small devices. And don't forget there is also mobile detect software.
Level 11
If Chrome dev-tools aren't mirroring what you actually see on your phone, you can use BrowserSync to open sites on your development environment from a smart-phone connected to the local network.
Level 5
@bwrice A great tool for auto sync! But it won't work on my iPhone. : (
I did these steps: php artisan serve this serves to localhost:8000. Then I added this to my mix file: .browserSync('localhost:8000') however, chosing something other than localhost won't make it work properly...
But with these above steps I cannot open anything on my iPhone. I am on the same wifi.
Level 5
If anyone is interested in knowing how to open your development server on the iPhone or a Smart Phone:
I have found the easy solution! (it's MAC only though)
- You install Larevel Valet by following the instructions here.
- If you already have a Laravel website, you open terminal and
cdinto the folder of the website. - Then run:
valet link app-name(where app-name is your folder's name) - Then run:
valet share
The link written at "forwarding" is openable on your iPhone.
It's really easy!
Level 23
why are you spamming this forum and bringing up dead posts? you are alienating people here
Please or to participate in this conversation.