I need to target a tablet only when the landscape mode is bigger than 1024px and reload on orientation change.Reload everytime I change orientation.
I tried this but doesn't work.
$(window).on("orientationchange",function(){
if (($(window).width() > 1024) && ($(window).height() > 1024)){
location.reload();
}
});
Any help?
I found a solution.
if (($(window).width() > 1024) || ($(window).height() >= 1024)){
$(window).on("orientationchange",function(){
location.reload();
});
}
Related
For various reasons, I am creating a site (not online yet) that has separate pages for mobile. I want to add something to the "monitor" site which says "if the browser width is less than X pixels, view *mobilepagename.html instead of this page. What code can I add to the main site CSS to do this?
You can't switch pages with only CSS. You can do media queries to change styling based on screen size though.
#media screen and ( min-width: 'px' ) and ( max-width: 'px') {
/* Mobile Styles */
}
Or you can use
#media screen and ( max-width: 'px' ) {
/* Mobile Styles */
}
max-width and min-width don't need to be in pixels either. You can use a variety of units like vw, em, etc.
If you want to switch pages based on screen size you'll need to use Javascript.
if ( window.outerWidth < x ) {
window.location = 'newpage.html';
}
Edit
Combine the above Javascript with a resize event.
window.addEventListener('resize', function(e) {
if ( window.outerWidth < 1024 ) {
window.location = 'yourmobilepage.html';
}
});
I am working on a code that checks if the browser supports Media Queries. If it does, it then checks the window width and if it falls under 700px it loads a CSS file, but if the window width resizes and goes back to something wider than 700px, the CSS file does not "unload" and thus, it looks bad. Can you please help me understand what and how is the best way to use this?
Here's my code:
function check_media_query_support() {
if (!Modernizr.mq('only all')) {
if ($(window).width() <= 700) {
Modernizr.load({
load:'../styles/jquery-ui/test_unsupported_mq_700.css'
});
} else {
}
if ($(window).width() <= 400) {
Modernizr.load({
load: '../styles/jquery-ui/test_unsupported_mq_400.css'
});
}
}
}
function resizeUi() {
check_media_query_support();
}
Modernizr won't listen to window size changes, with the functionality you are looking for, you actually probably want a responsive polyfill, like respond.js
I've put the following meta tag in my mobile HTML
<meta name = "viewport" content = "initial-scale = 1.0">
After I coded the css file for mobile version, I realized it doesn't look good on lanscape mode since it has a different width size. I get an empty 160 pixel area on the right side.
Other than writing a separate css file for landscape mode, is there any way getting out of this?
You also need to bind the orientation change event. You can do it with this sample script:
<script>
$(function(){
function orient() {
if (window.orientation == 0 || window.orientation == 180) {
$('.featured').css('display','none');
orientation = 'portrait';
return false;
}
else if (window.orientation == 90 || window.orientation == -90) {
$('.featured').css('display','block');
orientation = 'landscape';
return false;
}
}
$(window).bind( 'orientationchange', function(e){
orient();
});
})();
</script>
If your css layout is based on screen percents instead of absolute values it should allow you to adjust to any screen layout without multiple css files just fine.
Look at the percent option: http://www.w3schools.com/cssref/pr_dim_width.asp
Or if you had a layout you wanted constant, you could center it.
center align the outise wrapper.
body{
max-width:786;/*target size of page*/
margin:0 auto auto auto;
}
is the easiest way.
You can use media queries to detect orientation changes and run different styles for each all in the same stylesheet.
Also for mobile it's a good idea to you use % rather than px for widths - what units do you use for css for mobile web apps?
/* Portrait */
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}
If you change ipad position from portrait to landscape viewport scale will be wrong (site is to big for viewport). I've searched a lot and found the same problem on lessframework.com
Take a look — http://www.youtube.com/watch?v=MGDjaE-eKAY
But there is no problem on stuffandnonsense.co.uk/projects/320andup/
I can't find out what makes 320andup working right and lessframework.com working wrong on ipad.
Any ideas?
I view-sourced if for you
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
Can I change which CSS file is loaded depending on the height of the browser?
For example, if the browser is less than 600px then use index_sm.css but use index_lg.css otherwise.
Within your <head> tags, put the following:
<script type="text/javascript">
if (window.innerHeight <= 600) {
loadcss('index_sm.css');
} else {
loadcss('index_lg.css');
}
function loadcss(file) {
var el = document.createElement('link');
el.setAttribute('rel', 'stylesheet');
el.setAttribute('type', 'text/css');
el.setAttribute('href', file);
document.getElementsByTagName('head')[0].appendChild(el);
}
</script>
This is the best answer I could come up with, I finally found this by accident on a very helpful site.
function adjustStyle(width) {
width = parseInt(width);
if (width < 701) {
$("#size-stylesheet").attr("href", "css/narrow.css");
} else if ((width >= 701) && (width < 900)) {
$("#size-stylesheet").attr("href", "css/medium.css");
} else {
$("#size-stylesheet").attr("href", "css/wide.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
The site is: http://css-tricks.com/6206-resolution-specific-stylesheets/
The jQuery changes the browser css on the fly so if you re size your browser the css changes. It also works in all browsers.
In supporting browsers, you can use media queries (specifically the height media feature).
You can use media Queries, as Quentin said. But, I think you already have the n css files and want to select one of them on fly. Just use something like this in your document head.
<script language="text/javascript">
if (screen.width == 640) {
document.write('<link rel="stylesheet" type="text/css" href="640.css">');
}
else if (screen.width == 800) {
document.write('<link rel="stylesheet" type="text/css" href="800.css">');
}
</script>