CODEWITHSUNDEEP
css
user2469520
user2469520

Reputation:

Tips on sites for testing web pages in various devices

I want to learn how to design web pages for mobile devices and am confused about "media" and testing my pages. I found this site - http://mobiletest.me/ - which is great for testing WIDTHS, but it doesn't appear to be able to detect which devices my pages are actually designed for. Let me explain.

I currently have a Mac laptop only - no iPad or smart phone. But I've learned how to use media to distinguish between different kinds of devices. For example, style sheet A below should only affect pages displayed in computers ("screen"), while style sheet B should only affect pages displayed in handheld devices.

link href="http://Geobop/2B/CSS/A.css" rel="stylesheet" type="text/css" media="screen"> link href="http://Geobop/2B/CSS/B.css" rel="stylesheet" type="text/css" media="handheld">

However, the styles in A.css are visible in every device I test at mobiletest.me while the styles in B.css aren't visible anywhere.

I assume that's because I'm using a laptop ("screen"), so when I view it through a simulated smart phone it still interprets it as a computer and only modifies the width.

Similarly, I've learned to use "media breaks" in style sheets, like this:

@media handheld
{
 body { background: #0f0; }
}

But I have the same problem; the above code is ignored in all simulated devices, but if I change it from "handheld" to "screen," it's visible in ALL devices.

So I'd like to know if there's a place where I can test my web pages in simulated devices that not only have tiny screens but actually function as mobile devices and interpret my media links, media breaks, etc. the way they're meant to function.

Thanks.

Upvotes: 2

Views: 74

Answers (1)

Chris Hanson
Chris Hanson

Reputation: 731

The @media handheld is quite useless most smartphones/ tablets tell CSS they are @media screen. Instead use media queries. http://css-tricks.com/css-media-queries/

In regards to testing, you mentioned you're on a Mac so you can install the IOS simulator, you will be able to run both an iPad and an iPhone. This requires downloading and installing Xcode from the AppStore (you may need an Apple developer account - I can't remember).

However it's better to design to screen resolutions rather then to devices. That way your website/application is more future proof. Start by building your website with a very narrow browser - once you are happy with how it looks start expanding the browser until your layout breaks. This will be the resolution you use for your first media query. Then fix your layout until its nice again at that resolution and expand again until it breaks and repeat. This is called mobile first design.

There are some frameworks you can use to help you with responsive websites, mainly:

Twitter Bootstrap http://getbootstrap.com/

Zurb Foundation http://foundation.zurb.com/

I should also mention http://www.browserstack.com/ - it's not free however it will let you run your website on a plethora of browsers and devices.

Hope this helps.

Upvotes: 1

Related Questions