• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

How do I make my site work on cellphones?

Jaxel

Well-known member
#1
I know how responsive design works... this page works on responsive design:
http://8wayrun.com/streams/?view=detailed

When I view it on my cellphone, it looks as follows:
Screenshot_2014-02-12-10-19-15.jpg

So I am making a new page at:
http://8wayrun.tv/

If you resize it in your browser, you will see that its responsive. But when I view it on my cellphone, it looks like this:
Screenshot_2014-02-12-10-45-42.jpg

It appears that the browser is not dropping below a minimum width. How do I fix this?
 

Martok

Well-known member
#2
Going by the colour of your browser, would that be Dolphin browser for Android?

If so, there seem to be issues with that browser and some aspects of responsive design.
 
#4
How did you build the responsive design on that page? Are you attempting to do any user agent sniffing?

Emulating any mobile device in the Chrome dev tools breaks the page. It looks like it's not getting the viewport information from mobile devices.

EDIT: You're missing the viewport meta tag in your header:

Code:
<metaname="viewport"content="width=device-width, initial-scale=1.0">
 
#7

Tracy Perry

Well-known member
#8
Just press F12, click the drawer icon, then click the emulate tab. It has a list of devices with various screen sizes and DPIs.
Did that and my whole screen slid to the right and I got my calculator, weather radar and a bunch of other goodies show up.... of course, I'm on a Mac. :p
 
#9
Did that and my whole screen slid to the right and I got my calculator, weather radar and a bunch of other goodies show up.... of course, I'm on a Mac. :p
Using the same browser on a different platform won't affect the visual rendering of the page. They all use the same rendering engine. It sounds like you've got something wrong with the responsiveness of your template.
 

Tracy Perry

Well-known member
#10
Using the same browser on a different platform won't affect the visual rendering of the page. They all use the same rendering engine. It sounds like you've got something wrong with the responsiveness of your template.
My point was... F12 is a main OS function for OS/X Mavericks.. ;)
I'm not sure what the key combo that would correspond to OS/X would be - will have to look it up.