Windows phone 8 images are wider than the viewport - javascript

I've been trying to solve an issue that only happens on Windows phone 8. They use as a browser IE10. In many responsive design projects I've checked that all the mobile phones work correctly except this mobile phone and it's browser.
The issue
The images are bigger than the viewport itself making the image overflow by the right side of the screen. This overflow creates an uncomfortable scrolling in it's x-axis.
Possible solutions which did not work for me
Matt stow solution
CSS tricks solution
I'm testing with a nokia lumia 925 and a nokia lumia 520. If I apply this solution they both have different layouts. Especially the nkia 925 as it has a big resolution the media queries act strangely, as it was a tablet.
Does anybody have a clear and working solution which does not break other devices layout?

Just yesterday i had the same Problem and yes i visited the same pages like you.
I just added an
.im_the_parent_class_of_the_image {
overflow:hidden
}
to the parent class/element of the image and it still works fine for me and no other browser was affected.

Related

CSS overflow on apple devices only bug

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:

Fullpage.js not scaling properly on iOS in landscape mode

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

Galaxy s3 breaks responsive layout

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.

Large images on Android with Titanium

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.

How reliable is detecting mobile devices by screen resolution?

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.

Categories

Resources