We Keep Coding

Detecting when screen is in portrait or landscape mode and the edges of a screen across device

I'm currently investigating how to detect screen mode (portrait or landscape) and also where the edges of different screens are so I can fit a sprite sheet animation right on the edges of the phone. And refit the animation to the correct view.
I looked at the screen orientation API at https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
which is experimental, so I might use that API to check the screen mode, welcoming any other suggestions of course.
My question though is about what tools are available to detect the edges of the screen of a device in javascript. So the animation is visible and positioned correctly.

If you're developing a web application, you could use the
window.innerWidth
window.innerHeight
properties to detect the window size of your user and change your animation as you see fit.

Reponsive website partially based on device instead of screen resolution

I've got my responsive website done with breakpoints setted up with #media queries. I've got couple of basic breakpoints
min-width: 1600px - for TVs and bigger resolution screens (that just center the whole page and make white margins on sides, nothing too significant)
max-width: 1024px - for tablets, there are many changes, especially because tablets has of corse touch screen, which desktops usually haven't. At all it looks pretty different.
max-width: 600px - for smarphones, there is also a lot of changes based especcialy on narrowing the content from two or four colums into one.
Now I found that might be a problem, because there are nowdays tablets which acts in the browser, as they have resolution width for example 1280px, but there are also still computers with width of monitor 1280px too, even smaller, so I can't change the breakpoint value for this.
I of course don't want the desktop version on tablet and tablet version on comuter, becase they're created not as much for resolution but more for the platform.
I know that there are things called user agents like WURFL, which seems to be perfect for this. But is there any way how to connect this value from WURFL (tablet, desktop, smartpohne...) with css #media queries.
For example detect in WURFL that the device is tablet and change the breakpoint value in CSS file, so it shows the tablet version, instead of desktop version? Or is there any other way with similar result as this theoretical solution?

There is no need identify the device, just use the right media queries.
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}

I think you are looking for this
jQuery code to detect mobile devices
http://www.webtrainingcentre.com/jquery/scripts/jquery-code-to-detect-mobile-devices/

Scale expanded div to fill viewport using CSS for both orientation modes

I am developing for tablet and the objective is to have the expanded portion of a banner, expand to fullscreen on tablet. Since full-screen is not supported on mobile browsers I was hoping to find an alternative solution. Currently the div has a fixed width and height on it for both, portrait and landscape orientation.
Objective: Tablet: In portrait + landscape view to scale div to fill height preferably with CSS only or basic JS.
Not sure how to go about this. Thanks for your help!

I'm not completely sure what your saying but have a look into media queries. They might be what you are looking for, it is pure css. http://css-tricks.com/css-media-queries/

Icon size using media queries

I am developing an app which runns on mobile and desktop browsers. I'm trying to find a sollution that could fix my icon size. I want icons to be small on desktop browsers but bigger on mobile browsers.
Can media queries detect screen density and if so can screen desinity determine my icon size?
And another thing: Is it better to detect screen size or density and adjust icons depending on the better choice.

Yes there is a media query that detects pixel density. Here is an example:
#media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Then you would change your background image and background image size here */
}
There is also a ton more info in this article at CSS-Tricks.

The question of whether to target device size or pixel density is tricky: it will depend on the specifics each time, and there's nothing to say you shouldn't combine both in your site. The media query you want to cover everything is:
#media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx) {
/* your retina rules here */
}
...which is probably the most helpful if you're sticking with PNGs rather than SVG graphics or an icon font. I recommend looking at retinafy.me - it's a useful resource (but not free), which is where that code came from.

Device orientation metadata

I have designed a website using media-query.
In the browser it is looking perfect. But when i am checking in the tablet or in mobile device, in portrait mode it is good,
but when I am changing the device orientation portrait to landscape then it is not looking perfect. So my doubt is "is there any meta-data to disable the device orientation, so even though user change the device orientation then the content will not rotate."
thanks,
naresh kumar.

If i understood you properly, you no need to disable the orientation but rather you can adjust screen elements even when the device is rotated. You can use the below queries:
#media all and (orientation: portrait) { ... }
#media all and (orientation: landscape) { ... }
Because a good design should fit in all devices and in all orientations perfectly...