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
Related
I've implemented a mobile version of a website http://www.ecss-jobs.com. I've used some media queries at 900px for laptop / medium devices, and 768px for phones / small devices.For Apple devices (safari and chrome), the CSS breaks for the detailed job listing page. I find this very strange as it works perfectly in the Chrome Responsive Design tool when selecting all the Apple devices...It occurs on all iPhones I believe (tested iPhone 7 and iPhone XR), though I'm unable to reproduce it on my desktop. I suspect this is because I'm using a specific CSS attribute which doesn't work for the iOS webkit but I'm only using flexbox so I'd expect this to work.
I'm not sure which parts of the CSS to attach, but the React code is not minified and available from the sources tab. The entire App overview is available at /static/js/App.tsx, and the specific module responsible for this page is at /static/js/components/JobDetails.tsx (from the sources tab). Thank you in advance.
Examples of working and not working are attached below:
Apple broken:
Android working as intended:
I am using http://alvarotrigo.com/fullPage to create a simple one page website. Everything is perfect except on iPhone when in landscape mode - when I scroll, instead of the page staying full screen and moving to the next anchor, safari reveals address bar & bottom nav causing content to scale in height.
Can anyone help please?
The problem is not that the bars are revealed, but that they hide when orientation changes. This is a iOS 7 behavior which may not be the same in other phone OS.
At this moment developers don't have control over this behavior of Safari over iOS 7.
The bug has been already reported in the github respotitory of fullpage.js but I'm afraid no solution has been found for it yet:
https://github.com/alvarotrigo/fullPage.js/issues/79
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.
I have a site that basically is a landing page for a QR code gives two options, one for each different video. The resize and orientation feature works great and all, but once this site is on blackberry nothing works. Javascript is working but it's not resizing my div's, everything is huge and zoomed in, nothing is floated right, what the hell is up? any ideas? here's the site...
http://dudnyk.com/files/oleptro_redirect/index.html
Thanks!
Some HTML elements are not supported for all the Blackberry Browsers...
http://docs.blackberry.com/en/developers/deliverables/6176/HTML_ref_div_561799_11.jsp
in fact HTML5 is supported for Iphone and Android that are based on Webkit, disgracefully only in Blackberry OS 6.0 =(
Update:
HTML5 Elements for BlackBerry
On iPad I cannot scroll a web page. It works fine in Safari, Chrome and Firefox on OS X.
The page has an area in which content can be scrolled only horizontally. It consists of a container div which has width = 100% and height = (100% - 40px). I am setting the height by a JavaScipt function which is triggered by window resize events. Inside this container is another div with the width of the content (very wide, to avoid line breaks). Inside that is the content.
CSS properties of the container are:
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
See the page and full source code here: dcfoto.de
On iPad, scrolling is not possible. What am I doing wrong?
By the way: resizing also does not work properly on orientation change. Maybe that's connected.
Unfortunately a two-finger swipe needs to be performed, and even then it is not responsive (when compared to the default one finger swipe scroll).
There are quite many javascript solutions out there, (sencha touch and iscroll being the most promising and advanced)
I would recommend http://cubiq.org/iscroll-4 which is hands down the coolest touch-scroll script out there. It also works for android, but quite more sluggishly since the default android browser albeit webkit based doesnot support css3 3d accelerated properties as good as the mobile safari one.
If I were you I would check for the user agent of the user, and deploy that script for android and ipad/iphone users.