I've been adding css support for handheld to my website but haven't been able to find a good tool for testing.
I tried using the webdeveloper plugin for Firefox but it doesn't work for me. Maybe that is because all my css is in the html and not a seperate css file.
Are there any other testing tools available aside from going out and buying a handheld device?
With a bit of hunting I found what I was looking for, thanks for the leads guys.
Opera will display the handheld css if you select "Small Screen" from the View menu.
I'm not sure if it's a good idea to resurrect the old question, but I hope somebody finds it :)
There's a simple way to test handheld css with with media queries:
#media handheld, screen and (max-width: 500px) { /* your css */ }
After that you can test on browsers that implement media queries by resizing the window to less than 500px.
If you have Visual Studio, there should be device emulators which let you test mobile IE, or they can be found standalone on Microsoft's site. Here are some for WM 5. There is an OpenWave simulator available to test that browser. Blackberry simulators are available as well, to test the Blackberry browser. You can (kind of) test iPhone support with Safari, although you can't verify the viewport meta-tag. There's an Opera Mini simulator here.
Also, get your CSS out of your HTML :)
I found out that switching media types in development environment works best for me.
For example if you are testing "handheld" css then just add media type "screen" to media atrib and
comment out your default css.
After this step is complete, you normally would want to test in on real handheld device.
<!-- <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> -->
<link rel="stylesheet" type="text/css" media="screen,handheld" href="handheld.css" />
For testing the iPhone, you can get the iPhone SDK here
But you need OS X / Apple computer for it to run the official way.
Not official/hacks:
There are ways to get OS X running on standart PC hardware like here.
Or get the SDK running in Linux / vmware described here.
Happy Hacking!
Huibert Gill
Most smartphones like the iPhone and some Android devices don't recognize the handheld.css. They took the mediatype="screen" so you need to include this short snippet of JavaScript.
Related
Morning all
I've employed media query breakpoints in order for my site to be responsive as is required in the modern age. For some reason, one of my breakpoints has just disappeared in the HTML document despite my CSS covering all breakpoints up to
#media only screen and (min-width: 1200px)
I can also confirm that my CSS document is in the root folder, situated as follows:
<head>
<link href="../styles.css" rel="stylesheet" type="text/css">
</head>
I've no third-party plugins installed on DW, but I do have Google Translate and Font Awesome.
Not aware as to the media query version but is the version which came with the software.
I appreciate this is specifically a coding site, not a DW-orientated forum so if it is something to do with DW glitching out, please disregard this post. However, if you feel there is an error in my coding, let us know!
[enter image description here](https://i.stack.imgur.com/9OYjk.png)
Not specifically coding-oriented but tried reinstalling DW, reverting back to previous versions of the software in order to rule out any DW-related problems.
I have removed the Google Translate plugin as well as the Font Awesome plugin to see if this WAS interfering with Media Query.
I am developing a website in a Windows system. I have Firefox and Chrome browsers installed. When I checked the responsiveness of my webpage by setting the device as iPad(768 X 1024) using 'inspect element' feature in these browsers, I could get different resultant UI for same device. Why is it so? On which browser can I rely on as I don't have any Mac/Apple devices with me to test? I am concerned of using other online web tools due to security issues. Please help. Thanks in advance.
There's a tool for checking responsiveness called browserstack. You can try it from here: https://www.browserstack.com. They're offering free trial.
Unfortunately there's no real substitute for device testing. Companies like BrowserStack offer real remote device testing but at a cost. With regard to browsers rendering differently, this has always been a pain. Look at CSS resets.
There's are some major differences between the way iPhone Safari, iPad Safari, and Mac Safari render HTML / CSS. What about the differences between the way Chrome renders content on a phone vs a tablet vs a PC? Do they warrant testing websites on all three versions?
I stumbled to this question, because I had problems that Google Chrome renders the same page different on tablets vs PC.
This was rendering differently:
fonts - there are other threads where people complain about different font rendering, i.e. Chrome renders em based font sizes differently on devices .
In my experience, if you don't declare font sizes, on tablets <p> and <div> will have different font sizes!
clear: both on tablets did put one extra paragraph space (this was used in dropdown menu), which was not seen on a desktop version (I have no idea why this happens).
I haven't seen yet but there are some responsive sites such as http://quirktools.com/screenfly/
or this site may help you
http://www.modern.ie/en-US/virtualization-tools
I haven't test it yet. I think there is a membership obligation for testing.
So I just found out that media queries are not supported in a large percentage of older mobile browsers. (source: book implementing responsive design). For instance the book says that 92% of Android users are browsing using Android v2.3 or earlier.. The current version is v4.x.
So I'm curious how to optimize for those users. Say I put the <meta name=”viewport” content=”width=device-width” /> in the head, since those browsers don't understand the following media queries, wouldn't they then just display a small fraction of the "desktop" layout (say 200px of the default 960px layout?)..
So I'm wondering if there would be anyway to remove the viewport metatag if the device doesn't support media queries so they can at least have the default desktop experience in those older browsers, any suggestions? Thanks.
Your book is out dated, see this chart here for more up to date information.
To sum up quickly though 5.5% of android users are browsing with something less then 2.3 (5.6% if you count the first patch of 2.3).
After the patch in 2.3 the browser on those phones is really pretty decent, I would target that and above since this will cover 94.4% of all Android phone users.
Also if you check this chart here you will see that support for actual css media queries goes all the way back to the android browser 2.1. (which means that 99.9% of users on android can see basic media queries)
Also if you look at these reports:
Browser 2.2 isn't seeing media queries
Browser 2.3 isn't seeing my width media query
You will see that at least back to 2.2 the meta tag you specify <meta name=”viewport” content=”width=device-width” /> is supported (I would assume since media queries are supported in 2.1 the meta tag is as well, even if it isn't you still cover 98.2% of users).
If you really want to go though the effort for those last few percentage points you can use some javascript to detect if media queries are supported. Personally I would checkout a library like modernizer. It will make your life much simpler if you choose to go that route.
I tried looking at http://slides.html5rocks.com/#slide-orientation and it's not working in Chrome 10 (dev channel), which I thought supported that entire slideshow. I also tried loading the same slide with the Nexus One, which is the phone used for images in the specification, but that didn't work either. Does any device/browser currently support deviceorientation? Would it work on laptops that have the technology?
Also, what is that slide supposed to do when orientation is working?
I am using Chrome 11.0.696.0 on a Macbook Pro, and that device orientation link works exactly how I imagine it should.
it doesn't seem to work in either Safari 5.0.3
or Firefox 3.6
it also doesn't work on my iphone 3gs
None so far, but people in the WebKit community are implementing it. Hopefully in a couple of months it will be available. Usually timeframes for new features are not set in stone.
Does this help at all: http://www.quirksmode.org/m/table.html#t50
There's a technology preview of Opera Mobile that supports device orientation and the replacement, getUserMedia() API.