Android/Opera Mobile - responsive-nav.js not pushing content down - android

Here's the site that I'm working on:
http://www.montevista.dreamhosters.com/
You'll need Opera Mobile Emulator or an Android device (not all of them show this problem). The Samsung Galaxy III shows it as well I think.
Here's an un-minified version of the stylesheet:
http://www.montevista.dreamhosters.com/wp-content/themes/Monte-Vista/style-unminified.css
I'm pretty sure that this isn't a problem with the responsive-nav.js, but something to do with my own code. I'm using Skeleton grid.
Is there any testing tool that would allow me to view source on this? I've tried connecting Opera dragonfly but it ends up showing me what is being displayed in the browsers instead of what's in the emulator.

Me again, replying to my own question. I fixed it by switching to Slick Nav (http://slicknav.com/) instead of Responsive Nav.

Related

Resize or Scroll the screen on Remote Debugging on Android with Chrome

I am trying to use Remote Debugging Android Devices on chrome. But I can not resize my mobile screen fit to 100% or any on Chrome(PC).
On mobile it looks like
But on Chrome (PC) it looks like
Now the problem is : I can not either resize mobile screen on Chrome (PC) nor scroll to bottom (I can only scroll only if I can on mobile)
I tried by zoom in/out but it's not working. But I can see the remaining part by resizing window but I can not see on full size window.
I am using Chrome Version 50.0.2661.102 m on Windows 10 Pro(64bit), Android 5.1 on Moto G (1st Gen)
UPDATE : Now I have updated chrome to Version 51.0.2704.84 m But still same problem
Press ctrl++ several times it will resize automatically, I found this solution by chance:)
Looks like you found a bug. Please file an issue on the Chromium Issue Tracker so the team can triage the problem and address it.
I had the same problem debugging Ionic with Crosswalk, but I was able to resolve the issue by pressing Ctrl and scrolling down.
Unfortunately, this changes the size of the text—but at least you can see all of the mobile screen.
I will try to answer it in best possible way.
When you resize the Chrome in Desktop Screen, try to resize the screen from divider screen between remote device and elements sections. Also use the resize from top of the Chrome as well if needed.
You will find scrolling issue in Google website landing screen (as in your case).
Try another website and check.
Remote debugging requires your version of desktop Chrome to be newer than the version of Chrome for Android on your device. Try using Chrome Canary (Mac/Windows) or the Chrome Dev channel release (Linux) on desktop.
See here for technical issue. Android Remote Debugging Troubleshooting
Below are my observations for two tabs:
I have opened two different tabs in Chrome in my Android device.
Now in left side has active Google opened in tab 1 and in right side inactive StackOverFlow is there in tab 2.
In below screen, left side has inactive Google opened in tab 1 and in right side StackOverFlow is there in tab 2.
After scrolling StackOverFlow screen
Individually screens look like below :
Please let me know if any issue is there. I am using Android 5.1 on Moto E

Ionic side scroll bar not working with Samsung S6

I am facing very weird issue. Working on mobile application using Ionic and Angularjs. Things are pretty good but all of a sudden side menu scrollbar become sluggish. It will be easy to pin point things but issue is only coming with Samsung S6 (Android 5.x). S4 it is good. Any other mobile with Android 5.X version it is good. iOS working great. Just specific mobile it is not good.
I am creating dynamic menu based on response, I tried to do it hard code way but nothing helps. Also cross check digest timing that is also in ms. So, I doubt that can be issue.
I can't even pin point the issue to solve it. As things are very much specific to this mobile.
Any idea to debug it or way I can get and/or provide more info.
Let me know if any further information is required.
PS: I tried fresh ionic application with side menu, there it is working good on S6.

Responsive design not working on actual smart phones

We have programmed a site at: http://tcsdesignreno.com/zing-cards/ to be responsive. Whenever I check it in online responsive design test sites (such as: http://mattkersley.com/responsive/ or http://beta.screenqueri.es/) it looks fine but if I bring it up on my HTC Sensation, iPhone 5 or a Galaxy 3 it cuts off the right side of the screen. I have used the standard web browsers and chrome on the phones. I am not sure how to check the CSS on my phone to see what the problem is.
Does anyone have any suggestions on either how to fix the site or how to find the error from my phone?
You can debug Android's Chrome Browser from your computer; details at this link.

jsignature signature not displaying on Samsung Galaxy S4

Using jSignature (https://github.com/willowsystems/jSignature) within a PhoneGap, JQuery Mobile application.
When trying to sign in the content div using the Samsung Galaxy S4 the drawn line is not displaying. The signature is there when I pull the data but is for some reason not displaying. Any ideas why this might be? It has been working on other devices such as Samsung Galaxy S3, iPhone, and iPad.
<script>
var signatureContentDiv = $("#signatureContentDiv");
signatureContentDiv.html("");
signatureContentDiv.jSignature();
</script>
<div id="signatureContentDiv"></div>
I have also just run into this. For me, the error appears on the Galaxy Note 2.0 while running Chrome. I tried changing to Firefox and it works properly. The same behavior is noted when trying the demo directly on jSignatures site. I would suggest checking against their site and seeing if your device works properly to eliminate your code being the issue.
Hopefully this will get fixed.
Additional Info: I have just determined that it seems to be based on the dimensions of the image. Anything over 66,000 pixels (such as 600x110) will cause the failure. This still seems to only happen on certain devices, all running the same version of Chrome.
Interesting that I wind up responding to the last thread I answered about this issue almost 2 years ago.
It seems the most recent update to Chrome on Android (V 43.0.2357.78) causes new failures to jSignature. If the page is in it's native size (no browser zooming), it works properly. If you zoom the screen, it fails. This is new behavior (on existing code). Other browsers seem to work properly.

Top-fixed navbar jittering on Android browsers while scrolling?

Visit a webpage that uses a navbar that's fixed to the top using an Android device.
Example 1: The Next Web
Example 2: A test page I built (You'll have to scroll down a little bit to get fixed navbars)
Is it only me, or does anyone else see the navbar "jitter" when you scroll the page? Is there anything you can do to fix it? I see the issue on my Samsung Galaxy S3 running Jelly Bean with Chrome, Dolphin Browser HD, and the stock browser. For some reason, I cannot replicate the issue with my Asus Transformer TF101 tablet.

Categories

Resources