JQuery & CSS - Screen Size Play Nicely

Canders_12
Canders_12 used Ask the Experts™
on
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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2011
Commented:
Why not use a CSS media query:

@media screen and (min-device-width: 480px) {
  .button{
    max-width:500px;
  }
}

Open in new window

Author

Commented:
Could you explain what each part is doing if possible?

Many thanks, Alan.
LZ1
Top Expert 2011

Commented:
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?
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
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.

Author

Commented:
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.
LZ1
Top Expert 2011

Commented:
Let us know when your back and let us know what your not getting.

Author

Commented:
got it :)

many thanks

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial