We Keep Coding

zslider javascript should work only in screen resolution below 768px

i want to use zslider javascript in my website, but can any one tell me how to make it work only in screen resolution below 768px
Here is the zslider script link:
http://www.cssscript.com/demo/mobile-friendly-content-carousel-slider-with-pure-javascript-zslider/

Use media queries to show slider content below 768px:
#media (min-width: 768px) {
.z-slide-wrap {
display: none;
}
}
Than use JavaScript to initialize slider only if width is below 768px:
if (window.innerWidth <= 768) {
var slider1 = new Slider('#demo', '.z-slide-item', {
// OPTIONS HERE
});
}

Detect if webapp is in landscape orientation and add padding-top

What I want the script:
-detect if site is in standalone app
-detect if site is in landscape
-add padding-top to header
if (window.navigator.standalone == true && window.innerWidth > window.innerHeight){
$('header').css('padding-top','20px');
}

Use media queries for device-conditional layout:
#media screen and (orientation:landscape) {
header {
padding-top:20px;
}
}
If the standalone property is really important, detect it in Javascript and add a class to the body:
if (window.navigator.standalone == true)
$('body').addClass('standalone');
Then use it in your CSS to apply extra requirements:
.standalone header {
padding-top:20px; /* only applied if standalone */
}
You can of course combine the media query with this.

I figured it out
if (window.navigator.standalone){
$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();
if(width>height) {
// Landscape
$('header').css('padding-top','20px');
}
else{
$('header').css('padding-top','0px');
}
});
}

window.matchMedia not changing even if media queries are present

There's a CSS file with these rules:
#media screen and (orientation:portrait) {
.foo {}
}
#media screen and (orientation:landscape) {
.foo {}
}
And then I've got this script, running on orientationchange:
function checkOr(){
if (window.matchMedia("(orientation:portrait)").matches) {
console.log('portrait ' + window.orientation);
} else {
console.log('landscape '+ window.orientation);
}
}
But matchMedia always returns initial state of the page, when window.orientation returns correct value:
portrait -90
portrait 0
portrait -90
Tested on iPhone 5 and iPad 4 with latest iOS updates.
What am I doing wrong?
Webkit bugtracker says that there must be rules for each media query, but that's not my case.

How are you adding the event to call the function on orientationchange? I just tried this on my iPad and it seems to work fine: http://jsbin.com/ewixuc/2
function checkOr(){
if (window.matchMedia("(orientation:portrait)").matches) {
alert('portrait ' + window.orientation);
} else {
alert('landscape '+ window.orientation);
}
}
window.addEventListener("orientationchange", checkOr);

CSS Media Query and Javascript/jQuery don't match up

In my CSS I have a media query like so:
#media (min-width: 800px) { /* styles */ }
And then in my jQuery, I'm targeting the window width and performing some actions.
Edit: as per the answers below, I have changed this function but my JS and CSS still didn't align. The problem was fixed by using the Modernizr function as specified in the accepted answer.
$(window).resize(function() {
var viewportWidth = $(window).width();
if (viewportWidth >= 800) {
// do something
}
});
The problem is that while the jQuery is executing bang on 800px or more, the CSS is kicking in at 740px.
Is there a known problem with these not aligning? Or could there be something on my page affecting the CSS and why it's 740px not 800px? Maybe there's something else I should be using instead of $(window)?
Edit: I've tested in Safari and it works perfectly. In Chrome and Firefox, the jQuery functions run spot on to 800px and so does the CSS. But in Chrome, the CSS actually runs after 740px, even though the media query is 800px - how can I get these to align perfectly?

You can use Modernizr to execute the media query in JS (the mq() method will return a boolean):
$(window).resize(function() {
if (Modernizr.mq('(min-width: 800px)')) {
// do something
}
});

Move your width check, or else the viewportWidth variable will always be the same thing:
$(window).resize(function() {
var viewportWidth = $(this).width();
if (viewportWidth >= 800) {
// do something
}
});

Valid code would be:
$(window).resize(function() {
var viewportWidth = $(window).width();
if (viewportWidth >= 800) {
// do something
}
});
Everytime window resizes the new value will be stored in viewportWidth variable. In your code viewportWidth gets the only value of the $(window).width() when the page was loaded.

What I just tried, and it seems to work, is to use the CSS media query to style an object, and then use javascript to test if the object has that style. Javascript is asking CSS what the answer is, rather than having two parts of the page determine it separately:
CSS:
#media (min-width: 800px) {
#viewType {width:3px;}
}
HTML :
<div id="viewType" style="display:none"></div>
JavaScript:
var answer = ($("#viewType").width()==3)

I agree with Steve answer. the jquery(window).width(); is does not match with the media queries and even doesn't provide accurate window width size. here is my answer taken from Steve and modified.
CSS :
#media (max-width: 767px) {
//define your class value, anything make sure it won't affect your layout styling
.open {
min-width: 1px !important;
}
}
.open {
min-width: 2px;
}
Js :
// when re-sizing the browser it will keep looking for the min-width size, if the media query is invoked the min-width size will be change.
$(window).on('resize orientation', function() {
var media = $('.open').css('min-width');
if( media == '1px') // means < 767px
{
// do your stuff
}
});
That's it~ hope it help.

change font-size for iphone/ipad saving zoom function

I have the UIWebView object that loads html-pages. Html-page has zoom function via js.
function setViewPortWidth(width) {
var metatags = document.getElementsByTagName('meta');
for(cnt = 0; cnt < metatags.length; cnt++) {
var element = metatags[cnt];
if(element.getAttribute('name') == 'viewport') {
element.setAttribute('content','width = '+width+'; minimum-scale = 0.1;
maximum-scale = 1.7%; user-scalable = yes');
document.body.style['max-width'] = '10px'+width;
}
}
}
I need decrease font size if my app runs on iPhone. How to do that with saving zoom function? If I do that via css #media queries
#media screen and (min-width : 480px) {
body { font-size: 25pt; }
}
font will looks great, but when I zoom in and zoom back it will be bigger than needed 25pt.
Problem solved by using standard zoom function instead js zoom.

1 px ≠ 1 pixel
CSS pixels are not device pixels
go and watch this tutorial its help to you
http://adcdownload.apple.com//wwdc_2012/wwdc_2012_session_pdfs/session_602__delivering_web_content_on_high_resolution_displays.pdf