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?
Related
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).
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 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 am noticing strange blue markings when I visit certain webpages on Samsung galaxy note 10.1 is running android 4.1.2. This is only happening on one website and not the other. I have attached screenshots of both. I think it could be due to certain CSS or JS. Not sure what is is. Please help.
http://i.stack.imgur.com/rxPFO.png
http://i.stack.imgur.com/25cNO.png
It looks like you may have an advertising blocker running. Could there be a banner add that should be showing where those blue images are?
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.