Link to home
Start Free TrialLog in
Avatar of Canders_12
Canders_12Flag for United Kingdom of Great Britain and Northern Ireland

asked on

JQuery & CSS - Screen Size Play Nicely

Hello all,

I would like to have a button that matches the width of the screen if on a mobile.  Else a maximum of 500px.

I have used the following code but it looks daft on phones that have stupidly tight pixels, such as the iPhone retina display:

.button, .button:visited {
      width: 100%;
      max-width:500px;
}

So, can I use jQuery to establish if it is a mobile device.  If it is then have it fill the screen, else pop it at 500px.

Any help to achieve this would be greatly appreciated.  Many thanks, Alan.
ASKER CERTIFIED SOLUTION
Avatar of LZ1
LZ1
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Canders_12

ASKER

Could you explain what each part is doing if possible?

Many thanks, Alan.
Sure. The @media part is defining what media we're going to be using, in this one the screen.  min-device-width is grabbing the minimum width the screen is able to use, in this case 480px.  

Next we define our button's width using regular CSS.

Make sense?
just a note: retina display is 960×640 pixels.

You still might still need a javascript or server side sniffer. Not all mobile devices have js, but I don't know what ones you're targeting... so it might still be a satisfactory solution.
lz1:

not sure i do :/ but i will look it up in the morning. thanks for truing to educate the idiot lol

 kozaiwaniec:

appreciated the heads up.
Let us know when your back and let us know what your not getting.
got it :)

many thanks