I have created a fairly simple responsive website and have optimized it for mobile use using the meta tags. It works very well on desktops and on iOS phones and even the Galaxy S5. However, based on some tests using a browser compatibility program, the design falls apart on Android devices using 4.2 or lower (including the Samsung Galaxy S2 through 4, Kindle Fire 2, and Google Nexus). The images (doesn't seem to matter what type of file) will either become very vertically stretched or disappear altogether, no matter the file type. I have tried many things and can find no apparent difference between the images that are displaying and those that are not. Also, my header and footer are no longer where they are supposed to be. From what I can tell, the problem is that Android is not interpreting my css in the same way as ios does.
I have been able to fix the problem somewhat by dictating pixel dimensions for all of the photos instead of percentages, although this messes with the responsiveness of the site. This also fixes my header/footer problem although there is a very large space on the top and bottom of the mobile drop down menu and my logo in the footer (.svg) is distorted despite giving it dimensions.
I can't seem to find any information about this problem so I feel like it has to be an easy fix that I am overlooking.
The website is www.2015housingconf.com.
Thanks in advance!
Related
So I've been trying to learn more about responsive design. I've started playing about on my computer with a tiny project with a mobile first approach. I scaled my browser down small and styled the layout correctly. Using % for widths and REM for fonts. I thought wow this is easy
However, when I went to look at my work on an actual mobile the layout positions were fine but every feature/element on the page was showing up tiny. So the navigation menu was coming up really small compared to how it looked in my browser.
Why is this? The browser I use is chrome and the mobile android.
While testing our site on different devices we found a problem on recent Android versions. There is a bug with textures under the page, where the content ends (actually there is no any content where appears the bug). The bug appears only when the height of the page zoomed out is smaller then the screen of a device. Previous Android versions (4.1 etc) show there just white space (as Apple and Windows mobile devices also do), but 4.4 and later randomly repeats some portions of the site. We tried different viewport metatag options as well as different "height=100%" and "min-height=100%" tricks in CSS with no result. Any ideas on how we can fix it? Thanks.
Screenshot: http://i11.pixs.ru/storage/7/5/4/2jpg_2263155_16706754.jpg
Our corporate website is going through some weird shenanigans. It looks fine on any browser when you view it on a desktop pc or laptop. However, when you surf to the website on a mobile device you get these borders around the page elements both in Safari on iOS and Chrome and Android 2.2 Stock Browser in Android.
While looking into the problem I've noticed that the borders also appear on Chrome on a desktop/laptop, but only at certain zoom levels:
100% zoom:
110% zoom:
Weird thing is, the lines aren't consistent throughout the different zoom levels:
This is taken at 90% zoom.
So to clarify: I can reproduce the problem I'm seeing on the mobile devices by zooming around in Google Chrome on a laptop/desktop. But when I load the website on a mobile device, I always see the lines, no matter what the zoom level is.
The entire website is given its lay-out through tables (Yes, I know... It was build ages ago as a template in Typo3 and though we can make small changes to it, rebuilding the entire template is not an option. But this aside.) so I thought it might have something to do with the CSS rules on the tables, but there doesn't seem to be anything wrong with that. And if it were a CSS problem, wouldn't the lines be consistent on the various zoom levels? This is the CSS file for the template: Pastebin
Either way, we're a bit stuck on this not knowing what's causing the issue. If anyone has ever encountered something like this, any enlightment on the issue would be appreciated. Thanks.
Edit:
Just tested this on IE, Firefox and Safari on a desktop. No borders there, no matter what the zoom level is.
Edit2:
Zooming to 500% (Chrome on a desktop) shows that some of the lines are blue, some are white and some are gray, according to the colour scheme of the website. They are also not equal in length and seem to change position when I scroll around the webpage (i.e: move a bit more to the left/right.)
This sounds similar to space/gaps between divs on website when viewed on iPhone/iPad ("On an iPad, when a website is viewed at a scale under 100%, some artefacts appear sometimes. One is particularly visible: a 1 pixel lines between divs, just like on your site, under the menu")
The solution to that answer suggests you either:
Disable zooming (if you have designed for viewing at that particular size)
Have a 1px overlap on elements (e.g. margin: -1px)
The overlap fix has worked for me in the past, though this might be harder with a table-based layout.
I've just launched a new version of our site and I'm trying to iron out a few issues which I wasn't able to test before because I can't emulate an android phone on my localhost (I'm sure it's possible - time didn't allow the required reading)
Anyway, I tested on ie7-9, ff, opera, safari, chrome, everything you can think of an mostly everything is just fine apart from:
on android phone: I have a horizontal navigation bar between the header and the content, the last item on the menu has shifted to the next line. This could be just a pixel, but why! why! why! boohoo :(
Then on IE7, on any page which has lots of products (like this one: http://www.traditionalirishgifts.com/guinness-merchandise) the filter options and the paging navigation are meant to be on one line, like they are on every other browser.
any css genius's out there fancy helping me out?
It depends on the screen resolution of the phone. If you tried it
on a phone with a wider screen in pixels, you would have no problem.
I see one IE7 problem:
div#dropMenu no specified padding
IE7 has a default padding unlike any modern browser.
Add padding: 0 and you will have no problems.
The website is tavistockrestaurants.com. We are trying to make this design work well in popular mobile devices. A particular android device seems to be enlarging the text, and I am unsure why. This causes the "contact" link in the top to wrap, and causes unecessary line breaks throughout our website. Notice the form is getting pushed below the images in this screenshot? It's supposed to have white space on the bottom!
We do have -webkit-text-size-adjust: none in place for all elements (using asterisk *). Is there an android equivelant? Has anyone experienced this on any android devices?
This behavior does not occur on all android devices. We have only seen this on Android 4.x, but I cannot reproduce it with my android 4.0 emulator.
What it currently looks like:
What it should look like:
(I do not have the specific device model used in the screen cap)
In CSS, pixels are not pixels.
Or rather, 1 CSS pixel does not always map to 1 hardware pixel. On certain high-DPI Android devices, one CSS pixel can be 1.5 or 2 hardware pixels. The Opera guys have a good overview on the topic.
Samuels answer is correct.
There is a workaround though. You can target specific devices and change the styles for that device specifically using classes or stylesheets. If you are using PHP you should be able to parse the "User-Agent" and determine which device the client is using and add a class to the body tag (and use that class to target that specific device in your CSS).
There are also services that will allow you to send users to a different version of the site depending on the device they are using. Here is a site that does the work for you.
There may also be device specific CSS being generated on loading the page. Using a CSS reset may also help your site be more cross-browser compatible.