This is the site I'm developing: http://www.syndicatetx.com/
This site displays correctly on iPhone, and 4 other android devices I tested but on my galaxy s3 it appears to remove the css class for the logo.
Problem:
logo doesn't appear on s3
"Welcome to the Syndicate Where Old Jazz Comes Alive Open May 2013" Doesn't appear. The weird thing is. The text is there! just not visible.
(You can copy and paste the text in the mobile browser)
If you scroll to bottom and then scroll up real quick the logo loads for 1 second then disappears.
https://www.dropbox.com/s/zod5eo9dh7tupr3/2013-05-06%2010.08.31.png
If I use chrome or firefox on s3 everything looks perfect.
If I use dolphin (with jetpack) it's perfect.
If I use dolphin (without jetpack) same as screenshot.
I realize I need to get into mobile debugging but as of right now everything I saw for mobile debugging was for chrome and firefox which displays the page correctly so doesn't really help.
I would just leave this as a comment but don't have high enough rep yet...
I had trouble with S3 before because of its extremely high resolution in comparison to other phones. I see that you are using 480, 750, 800px to identify devices. Just be aware that the high resolution of that phone 1280 x 720.
Related
First, sorry for my english. I'm from Russia, I've tried to get answer on russian version of Stack Overflow, but no success.
Right now I'm doing a website on my work. It contains a lot of heavy images and visual effects (according to designer's layout). While I was testing the main page, I ran into strange bug. It is very difficult to catch it, but our designer saw it on his iPhone XS max and iMac with Retina display 5K. Me on my Xiaomi Redmi 4A, iMac Retina 4K and Macbook Air 17 couldn't catch it.
Please, take a look at the screenshot. How this block works: we have three pictures, when user swipes left or right, they are moving, and centered image is scaling to 110%. I'm doing it via CSS3 and jQuery.
It looks like a trace from immediately stopped vehicle. Does anybody now why this happening? Maybe I'm doing something wrong?
Images are in PNG. On screenshot you can see two normal states and one with bug. Bug was captured on iPhone XS max, normal states are captured in Chrome Developer mode (simulating iPhone 6/7/8 plus).
Thank you
Link to picture:
Bug
I develop apps with Phonegap for Android.
In some of those apps I use javascript to make some dynamic calculations and place elements on screen.
The app uses Fullscreen preference in config.xml
So far that has been working well, but today I noticed that one app content went behind the black android system bar at bottom (the one with the back button, etc). And if I turn landscape, it also goes behind the bar.
Inspecting, I found that in landscape mode, for example, screen.width is returning 640 for my device, when before it used to return 620. So it looks like now it is including the system bar space?
How can I detect if the value includes the system bar space or not? And how can I know how much space the system bar takes?
The app behavior changed without recompiling it. So something external affected its behavior. Some days ago, the phone had an Android update. Maybe it is related to this.
The phone is using Android 5.0.2. After it upgraded to Android 5.0.2, it was working well. Then there was another, smaller update but it did not change the Android version number. The device is Moto G.
Thanks for any help on this. I really need to be able to get the screen width and height without the space used by that system bar, as it had always been until now.
Do you still have this issue ?
If you have screen problems with an additional bar at the bottom, you can detect it with
$("body").height() != window.screen.height/window.devicePixelRatio
From here I am trying to trigger something that will remove the additional bar. Reload / redraw / etc ...
I am building a WordPress website and there is a second navigation box that is only displayed on small mobile devices. I cannot figure out for the life of me how to get rid of it. I am unable to find out what it even is due to a lack of page inspection tools on android.
mangapunch.com is the website and I use a Samsung Galaxy S3 to get a feel for small mobile devices so if you do any checking I would suggest a similarly sized android phone.
I would love an explanation for why it is there and what causes it to exist.
I just realized my website looks different in Chrome, as it looks in the native Android browser. I am using my Galaxy S3 to test. I am using Bootstrap with the mobile navigation (navigation changes to the nav-symbol when the window-width is less than 768). on Chrome i have the symbol, then i saw that i have the normal navigation in the Android browser.
To test i call $(window).width(). Chrome says 360px in portrait and 640px in landscape. These are the normal resolutions from the S3. When i call this in the native browser it says 444px in portrait and 790px in landscape. Everything is smaller than in Chrome.. and I don't get the mobile navigation on landscape (because this would happen when width<767... but here the browser says it's 790)
Does anyone know whats going on here?? Thanks for your time and help :) Greetings, gertnaster
I am working on a web page, that has to be 100% high. I did it so, it works fine everywhere, except on Android Firefox.
The problem is:
When I open the page for first time, in landscape mode - the address bar overlaps the content.
If I do orientation change - it gets OK in portrait mode, and when I go back to landscape mode - it's OK there too. The problem appears only in landscape mode, before any (eventual) orientation change.
Tried many things, mostly some scrollTo() solutions, but nothing worked.
Thanks in advance.
I believe this is just how the Firefox app works. You could state in your (CSS) style sheet a 10 to 15 pixel "margin-top" for the body. This would create a black space at the top of the page. You could just adjust that height accordingly.
You could also try to check for that browser with a javascript and specify a new CSS with the "margin-top" adjustment if you didn't want it to adjust except on the Firefox app.