I just found out that if I navigate on my
website with iOS (iphone and ipad) it shows me this -> https://i.stack.imgur.com/9scRZ.jpg
While if I open it with Android it shows me this one (that is the correct one) -> https://i.stack.imgur.com/lW3VR.jpg
All the images, in different pages, that are as background, have this problem (on iphone), the same for the footer that has a background image too. It's like if on iPhone all the background images are super zoomed.
I deleted the cache, I checked all my CSS code and I tried to change pictures, nothing happened.
What else can I do?
Thanks for your advices!
Yes, it could behave differently. Since, we could write different css based on resolution or user-agent (safari for ios, chrome for android).
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.
I have 2 weird behaviors, and I think they might be related, but I am not sure..
1) In my phonegap app (Remini), local offline images (icons) sometimes (not always) are not loaded/displayed on Android 4.4.2. For example Look at the difference between the two screen shots:
2) The second problem (in the same Android 4.4.2), is that I when the user picks an image from his gallery (using a non-standard image picker plugin for phonegap), sometimes, the image simply doesn't load. The image paths / URIs are returned to the javascript correctly, and when I am trying to assign these to an .src, the onload event doesn't fire.. In other (lower) versions of Android it worked just fine. Now in order to prevent some anticipated comments - My img.onload event is defined before the img.src assignment, and the plugin works correctly on other versions..
Now, I am not sure the problems are related, but in both cases, there is an unloaded image element, although with different sources..
Does anybody know one of these problems? Are these related?
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!
I'm using JQM to build apps with the help of Phonegap Build. Today I got my iPhone 6 Plus and it looks like apps are blown up a bit. On my Oneplus One everything looks ok:
iPhone:
Oneplus:
Can this be fixed? What is the problem? iPhone, Phonegap, jQM?
The images need to be 3x resolution. You could also add a launch image at that resolution to activate it. Perhaps this or this might help?
It seems like al the iPhone 6 does is show the same app, but make it larger (what I call blow up in the title). You would think a larger display would show more content, right? The image I'm using is shown the right way.
I'm not sure but I think this has something to do with jquery mobile not being able to handle the 2 and 3 pixel ratio. Android doesn't have this issue? Maybe wait for a new version of jquery mobile or use media queries in the meantime?
The other strange thing is the statusbar which seems to be larger in the app than outside or in other apps. Guess this is a phonegap thing seeing they create the webview?
Major head scratcher happening today. I developed a Cake app, hosted on Pagoda Box, that runs fine on all browsers except Android native browser on the Galaxy S3. It displays a white screen:
http://broomage.pagodabox.com/sweepstakes/MetsMoments2013
However, I uploaded this app to a standard LAMP server so I could debug it more quickly, and it showed up just fine! See here:
http://epi.qa/broomage/sweepstakes/MetsMoments2013
I'm really mystified at this point, since it now seems specific to Pagoda Box. I've checked the apache/php/cake logs and nothing weird is showing up. I can also "view source" and see that everything seems to be loading properly--only the browser just shows a white screen. This problem also happens on certain sites that use the Bootstrap library, but will sometimes show up if you go to another URL then hit the back button. But this particular site just shows a white screen on the S3 no matter what I do. Any ideas???
Grrr, I think I narrowed it down to a gzip issue: If you are serving certain assets thru a php script, the size may be reported as a mismatch w/ the compressed size, which screws up rendering on lackluster browsers like that of android.