Redirection with CSS and Javascript - handheld devices - javascript

I have been trying to redirect based on screen size generically on all desktop and hand held devices and I guess media queries is quite an answer to it because when i detected screen size with javascript screen.width then different browsers returned me different screen size which was quite irritating that why is this happening. Well I need to know two things will the following code detect the screen as javascript did or it'll detect generically 100% accurate screen size? and if so how can i trigger a rediretion javascript code if the following css rule being becomes true?
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* iPhone, Android rules here */
}

You could use a framework like jQuery or Mootools to avoid browser inconsistencies.
I may have written something that does what you want: http://jsfiddle.net/aUW4N/

Related

jquery mobile browser detection to css class

I'm currently using the following code in DIVI to detect a mobile browser so that some features are turned off, by adding notonmobile to the CSS Class
#media screen and (max-width: 600px)
{
.notonmobile {display: none;}
}
However I would like to be more specific due to the resolutions of devices and some functions do not work on mobile devices, I found a jQuery here http://detectmobilebrowsers.com/
Is there a simple way to merge the 2 so that if the query is true (mobile based browser) then the notonmobile value will work in the class??
Thanks

How to get an App made using JavaScript to autoresize for other Apple Devices?

I've created an app using Javascript / CSS and HTML, just a simple game, nothing special.. however, when I run the game in xcode (iphone5 simulator) it runs fine, no problems and on an actual iPhone5 device using the ad-hoc method via my Apple Dev Account, but when I try it on the iPad mini and iPad 3 the game only show's up in the top left hand corner inside a what can only be described as an iphone5 size screen. Question is, how using either JS, CSS or HTML do I tell the app (in xcode6) to resize to a device bigger than iphone5.. basically how do I tell the app to resize depending on device, I want to launch the game (hopefully!) for iphone5, 6 and all iPads of course.
I'm using xcode6 and iOS8
Many thanks in advance for any help given.
Would be happy to screenshare over Skype if this is easier to do? (Let me know)
The problem was iPhone has smaller width compare to iPad. You have develop an app for iPhone , so when u simulate it on iPad i only takes width upto 586px or 320px not all iPad width. This width can be adjusted by using media queries.
Add the following media queries with your stylesheet.
Use CSS media queries as follows
html
{
//default styles as you have used(for iPhone 5 as you said)
}
body
{
//default styles as you have used
}
.contianer(wrapper)
{
//default styles as you have used
}
//media queries for iPad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
/* STYLES GO HERE */
//use width upto 768px
}
//media queries for iPad mini
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
/* STYLES GO HERE */
}
Use proper width upto 1024px to 768px as it can match with iPad and you can get your app viewable for iPad.
Go to this Link for iphone and ipad styles.

Foundation responsive only to a certain width

I´m using zurb foundation to create a responsive website. When i resize my window the grid changes to the mobile mode, it´s normal behavior. Is there any way that when i resize the window the website stays put and the browser only adds a scrollbar?
I still need the mobile version to exist, for mobiles only, and i have already try to use min-width to set the point where the scrollbar is added.
Does any one have any idea how to do this?
EDITED
I have the folowing media query:
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {}
And in the html i have elements whith the folowing class:
small-block-grid-1 large-block-grid-3
In the css file change the media query to max-device-width to target devices only.
I hope this helps :)

How to switch image for mobile users?

I use large images in most of my (Wordpress) posts. I'd like to optimize these for mobile users. I'm not sure what optimize means but I'm guessing CSS, jquery or JS switches out the larger image for a smaller one?
Are there any examples of how this should be done?
Jquery Bires will do exactly what you want.
https://github.com/ahoward/jquery.bires
I would use CSS Media Queries to serve different CSS based on screen size
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
For example
#media (max-width: 700px) { ... }
Would serve specific CSS to any device with screen below 700px

Detect small (mobile) screen in Javascript (or via css)

I want to make some of the fonts on my website larger, if a visitor is using a small screen. Ideally without jquery, as I want to do this early on in the page load, and I don't want to load jquery until later, for faster loading.
The best I have come up with, is to check for screen size. But this is far from perfect. An iphone4 has relatively large size, but small screen, while some old netbook might have a smaller resolution but a larger screen. I guess what I really want is some variant of screen "DPI".
If there is some css way of saying "on a small screen do this, else on a large screen do that" that would work too.
In CSS2 there's a media property and in CSS3 this can be used to do media queries. It's not supported on all browsers, but it may be okay to use since your small devices like iPhone etc do support it.
#media screen and (min-width: 781px) and (max-width: 840px) {
body {
font-size: 13px;
}
}
This site doesn't care about IE, try it in FF or Safari, change the browser width and notice how the width changes using this property.
Media Queries are the key and are a lot of fun to use.
See http://jsfiddle.net/neebz/kn7y3/ and change the width/height of the 'Result' panel to see it working.
Example taken from : http://www.maxdesign.com.au/articles/css3-media-queries/media-sample/

Categories

Resources