I have a Nexus 5, and when I go to http://ryanve.com/lab/dimensions/, it tells me that my width 360. I understand that there is a difference between my phone's resolution and the width of my browser.
However, when I write a function to change at under 767:
function detectmob() {
if($(window).width() <= 767) {
return true;
}
else {
return false;
}
}
if (detectmob()){
}
else {
}
It doesn't work on my phone. If I resize my browser window width to be <= 767 on my laptop, the function works correctly. When I view it on my Nexus 5, it doesn't.
Could anyone help me write a function to target mobile devices using the browser width?
When you visit a website via a mobile browser it will assume that you're viewing a big desktop experience and that you want to see all of it, not just the top left corner. It will therefore set the viewport width at (in the case of iOS Safari) 980px, shoe-horning everything into its little display.
The Viewport Meta Tag
Enter the viewport meta tag, introduced by Apple, then adopted and developed further by others.
It looks like this:
<meta name="viewport" content="">
Within the content="" you can enter a load of comma delimited values, but we're going to to focus on the fundamental ones for now.
For example, if your mobile design is purposely laid out at 320px you can specify the viewport width:
<meta name="viewport" content="width=320">
http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972
Related
I have a footer that appears when a user scrolls down on the bottom of the page, but for seem reason it doesn't appear to be working on mobile devices, particularly the ipad, and it seems finicky on there. Sometimes it works sometimes it doesn't and only when using the ipad vertically.
<script type="text/javascript">
var $window = jQuery(window);
var $document = jQuery(document);
var footer = jQuery('.footer');
footer.css({opacity: 0});
$window.on('scroll', function() {
if (($window.scrollTop() + $window.innerHeight()) == $document.height()) {
footer.stop(true).animate({opacity: 1}, 250);
}
else {
footer.stop(true).animate({opacity: 0}, 250);
}
});
</script>
Just fades in and out on the bottom of the page condition. I looked around and there seems to be several ways to go about doing this and I was wanting to know the most effective solution.
I thought I had found a jfiddle for a solution a while ago but can't seem to find that question anymore and it required me to dig quite a bit.
I'm not exactly sure all of the factors that go into mobile not being compatible with this solution I currently have, so it's hard for me to determine what needs adjusting. Thanks.
Actually figured out the issue is that it needs to be the exact document height if I'm using '==', in mobile devices the viewpoint doesn't trigger the script while moving or scrolling so I had t change the '==' to '>=' in my condition and then add height to my viewport.
if (($window.scrollTop() + $window.innerHeight()) >= $document.height())
And in my header viewport tag
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
And it works perfectly!
My goal is to prevent the js from loading on an element when the browser width is less than 500px. Basically, I don't want it to load on most mobile devices.
var mq = window.matchMedia( "(max-width: 500px)" );
if (mq.matches) {
// Don't load function //
}
else {
// Load function //
}
It seems straightforward, and when I try it on my laptop, it works perfectly. At over 500px and the js loads. At under or equal to 500px, it doesn't load.
On my phone, however, my js media query doesn't work because the function loads. Someone suggested that it might have to do with my meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
I'm not sure what I'm doing wrong, but I can't seem to successfully relay the mobile browser width to javascript. Any help is greatly appreciated.
When it comes to mobile browsers you can get funky results by using max-width: 500px media queries, because of the high pixel densities in mobile screens. Your best bet is to use device media queries, e.g. max-device-width. So in your case it will look like this:
var mq = window.matchMedia("(max-device-width: 500px)");
if (mq.matches) {
// Don't load function //
}
else {
// Load function //
}
iOS 8 removed "minimal-ui" viewport property support. How to detect if browser is iOS Safari and if it supports "minimal-ui"?
Adding "minimal-ui" to the viewport does not cause an error, making feature detection harder.
var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'minimal-ui');
document.head.appendChild(meta);
// No error.
I'd like to avoid version detection:
var version = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
version = [parseInt(version[1], 10), parseInt(version[2], 10), parseInt(version[3] || 0, 10)];
if (version[0] > 8) { /* [..] */ }
Because it is unknown what is the future of "minimal-ui".
The only reliable solution that I have found is adding "minimal-ui". Then on page load checking the window.innerHeight. If it is greater than the height with the chrome around, "minimal-ui" is supported. This will work, because even if page is displayed in "soft" full screen mode (when user touch-drag the page to enter the no-chrome view), window.innerHeight does not reflect the "soft" fullscreen height until after the implicit scroll/resize event, e.g.
Assuming iOS 8, iPhone 5s and page loaded in "soft" full screen:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="minimal-ui">
</head>
<body style="height: 1000px;"> <!-- Document height must be greater than the viewport to enter the soft fullscreen. -->
<script>
if (window.innerHeight == 460) {
// We know that minimal-ui is not supported because initial
// window hight is that of browser window with the chrome.
}
// This event is called instantly after page load.
window.addEventListener('resize', function () {
window.innerHeight; // 529
});
</script>
</body>
</html>
I am trying to get the screen dimensions on an IPad.
$wnd.screen.width
$wnd.screen.height
When I am in landscape mode, the dimensions return 768x1024. This is not what I expect. How can I get the real dimensions of 1024x768?
Note: I am not changing the orientation, I start in landscape mode and stay in that mode.
As the simplest solution, swap width and height if width is lesser than height so you always get the resolution of landscape mode.
function getResolution(){
return {
width: $wnd.screen.width < $wnd.screen.height
? $wnd.screen.height
: $wnd.scree.width,
height: $wnd.screen.height > $wnd.screen.width
? $wnd.screen.width
: $wnd.scree.height
};
}
The iPad likes to do funny things with scaling when you change orientation.
You can resolve many of those issues with a <meta viewport> tag, e.g.:
<meta name="viewport" content="user-scalable=no,initial-scale=1.0,
minimum-scale=1.0,maximum-scale=1.0">
I am having an issue on my website I am building when viewing on an iPad or iPhone.
The header of the page is position:fixed; to the top. Whilst the rest of the website scrolls down in a container div.
Basically when i view on the iPad, and pinch to zoom. The header element zoom and moves to the right, and the scrollable content moves left and also enlarges so i end up with as website that is in two sections?
I have attempted to use the min-width:1024 css and user-scalable=0 but neither work. The user-scalable stops it from being zoomed but then when it rotated to portrait from landscape, the website retains the width at landscape as it rotates, so then the website is too wide for the screen.
Hope I have explained this well enough.
I have tried some javascript which I got from this website but that completely scrambles the whole website as it rotates...
the code I tried to use is below:
...html header...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
...javscript...
var checkOrientation;
checkOrientation = function() {
var viewport;
viewport = document.querySelector("meta[name=viewport]");
if (window.orientation === 90 || window.orientation === -90) {
return viewport.setAttribute("content", "width:device-width, initial-scale=1.0, user- scalable=0");
} else {
return viewport.setAttribute("content", "width:device-width, initial-scale=0.6, user- scalable=0");
}
};
window.onorientationchange = function() {
return checkOrientation();
};
checkOrientation();
Thank you in advance