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 need to display a huge image (at least 2000x2000) on Android with Titanium and let the user scroll around, just like they were using a scroll view on iOS. However, I know Android doesn't support the same kind of scroll view, so I opted to use an ImageView.
I'm unable to display this image properly or at least the way I'd like (without it being blurry when you zoom in) because of memory issues. Has anyone found a way to make large scrollable images work in Titanium on Android without potential memory crashes?
I tried WebView also, but it seemed to resize my image and when you zoomed it was blurry as well. I was hoping Android webview supported SVG, but it looks like they don't on a majority of devices.
This is by far the best answer I've found:
http://www.tenxperts.com/2011/07/13/working-with-large-images-in-android/
I tried it and it works well with Titanium web views.
This sounds a bit too good to be true, so please tell me if it is.
If I have just one single version of a mobile website (no variations for
different devices, just one website for all mobiles), how reliable it is
to detect mobile devices by screen resolution?
And simply serve the mobile version if screen resolution is < than say 400px.
NOTE: My question assumes that javascript is enabled. Also,I'm aware there's
user agent detection, but I'd like to do without it.
Javascript mobile device screen detection for height is not reliable at all. The problem is that different browsers use different amounts of 'chrome' and different OS versions use different heights for the system bar. All the detection mechanism report unreliably for height (screen.height, window.outerHeight, window.innerHeight - etc,etc)
Width seems to be most reliable on window.outerWidth across all OS's.
Read a most excellent analytical report here:
http://www.tripleodeon.com/2011/12/first-understand-your-screen/
You will want to look into serving different stylesheets via media queries. You can use queries to identify screen widths and only serve certain css to certain devices. For example this query would serve a iphone.css only to devices identified as having the typical dimensions of an iphone:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
There's a detailed article on this subject over at alistapart
Bear in mind though that not all devices recognize media queries. If you need to support lots of older devices like blackberry's and flip phones you should take the advise above for using UA detection - I know it feels wrong if you're coming from the desktop development world but really we have to use the tools we have available to us and Mobile Web is a growing but in many ways still a new horizon.
I came here because I had the same idea and question, and similar situation - the website already requires JavaScript and I'm doing a one-size-fits-all mobile web app, at least for now. Our release cycle is really long - any UA detection I hard-code will be somewhat obsolete by the time the code is tested and released. Since the purpose of this alternate interface is to make it work on smaller screens, it would seem to make sense to use that test.
I don't know however, what size I would pick - I have a hunch mobile devices are not bound (even by convention) to particular screen dimensions. I guess we just have to decide at what point the main web page is no longer functional.
I can understand other people's hesitation to this approach because sometimes there are other issues with a standard site on a mobile device than just the screen size. However, I think there is an advantage to this kind of detection. If your only issue is the screen size, I think it is a good way to go.
Probably not going to hurt to add this functionality to your website for those who are indeed running JavaScript enabled web browsers on their mobile devices. As for those who are not, well there's little you can do about them, other than something simple like letting them select their screen size at first load? Maybe a simple drop down list with possible sizes?
It depends on what you want to achieve.
If you design for different screen resolutions regardless of device type then it is fine to use resolution ranges.
If you design for specific device types (phone, tablet, etc.) and assume a resolution range will always match a single device type, then it will eventually break.
You used a 400px threshold in your example, the Galaxy S8+ reports 412x846 with this code:
console.log("width: " + screen.width + ", height: " + screen.height);
Device resolutions change every year and they are starting to overlap with each other. Large phones have higher resolutions than small tablets and large tablets have higher resolution than some desktops.
You may get away with it if you just want it to mostly work or if you want to detect specific phones.
However it is not reliable to use screen resolution alone to detect the device type.