We Keep Coding

Fixed element's translate x is out of sync when zoomed on mobile device

I have a fixed header. I have it set to position: fixed, but it can be scrolled along the x-axis. This is the javascript I am using for the x-scroll:
var thead = document.querySelector("#acctInqFormResults table tr:first-child");
window.onscroll = function() {
thead.style["-webkit-transform"] = "translateX(" + -window.scrollX + "px)";
thead.style.transform = "translateX(" + -window.scrollX + "px)";
};
This was working great up until I tested it on mobile devices. When I pinch to zoom in on the table, the fixed heading appears to scroll at the same speed as when the document was loaded at full size thus putting the header and the table contents out of sync. Is there a way I can compensate for mobile zooming?

I believe that adding this viewport meta tag should help mobile browser to calculate position correctly. After all - if you are making mobile-specific site version, zoom is useless and even avoidable altogether for best user experience.
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

Using .scrollTop animation with mobile device not working

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!

Browser width for mobile

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

Responsive design on android smartphone not fitting to screen

I'm having problems getting a Viewport which works on an android smartphone.
My site is fully responsive down to 480 pixels wide, whereupon it has a min-width set of 480px on the body tag.
My first viewport was this:
<meta id="myViewport" name="viewport" content="width=screen-width, user-scalable=yes"/>
This worked on most devices I checked, but on an Android phone, it appeared zoomed in and did not automatically shrink-to-fit to the width of the screen.
I then tried using javascript so that onload, the width attribute of the viewport changed to 480 rather than screen-width should window.innerWidth < 480. This half worked: when the page loaded, it then resized to fit the screen. However, during the load, it was still zoomed in, as expected.
Finally, I changed it to...
<script>
if (window.innerWidth < 480) {
document.write('<meta id="myViewport" name="viewport" content="width=480, user-scalable=yes"/>');
}
else {
document.write('<meta id="myViewport" name="viewport" content="width=screen-width, user-scalable=yes"/>');
}
</script>
This goes back to being zoomed-in. It works on other devices I have used.
Any ideas?

Try using the following meta tag
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1, minimum-scale=1 initial-scale=1.0" />
Hope you are missing the scale parameters.

How to make my simple website-quiz fittable to tablets and mobile phones?

how could I make my simple website-quiz fittable to tablets and mobile phones? The size of the quiz is 1024x672 in landscape mode. The size is static. If there's no bullet-proof solution for all devices, I would prefer a solution specific for iPhones and iPads.
Here's the quiz: http://wp.servitus.ch
Requirements:
auto-zoom dependent of current screen-size of the device
user should not be able to zoom manually
possible to force landscape mode ?
I already experimented with:
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
This works fine for iPads, but is way too large on the iPhone.
Any ideas ?

Currently I am using the code below. This meets my requirements for the moment (distinction between iPad, iPhone, Computer). If anyone has a bullet-proof solution for all possible devices, I would be glad if you would share it with me :-) Thanks!
$(document).ready(function() {
var isMobile = (/iPhone|iPod|Android|BlackBerry/).test(navigator.userAgent);
var isTablet = (/iPad/).test(navigator.userAgent);
if(isMobile) {
$('<meta name="viewport" content="initial-scale=0.45, maximum-scale=0.45, width=device-width, user-scalable=yes">').appendTo('head');
} else if(isTablet) {
$('<meta name="viewport" content="initial-scale=0.95, maximum-scale=0.95, width=device-width, user-scalable=no">').appendTo('head');
} else {
$('<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, user-scalable=no">').appendTo('head');
}
});

This meta viewport can't help you, as the initial-scale is 1. That's why it's way too big for iPhone: you tell the device that the initial scale of this page must be 100% of its size (here : 1024px width), you have to remove this parameter or set it lower (0.5 or 0.625, as 640/1024 = 0.625).
Try with (this should work for iPhone and iPad) :
<meta name="viewport" content="width=device-width">
or (this should be very small on iPad) :
<meta name="viewport" content="initial-scale=0.6,user-scalable=no,maximum-scale=1,width=device-width">
EDIT :
This should work :
<meta name="viewport" content="width=1024">
I used that trick on a mobile website that haven't been well coded, it forces the viewport to 1024 and make it fit in the device screen. You can add whatever parameters to the meta.