I'm searching for a reason and a hint why my website (Link) is not shown correctly with responsive design (based on Twitter Bootstrap) on iPhone5 Safari Browser while it is completely working correctly on desktop using IE, Chrome or Safari. Also on HTC & Samsung Galaxy the website is working correctly.
By Googling I only could find 2 solutions which are
A) cleaning the cache of the browser and
B) using
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
Both doesn't fix the problem. Also simulating the iPhone 5 Device in Google Developer Tool shows the website correctly while in reality the page does not show the CSS design.
Here the:
False Responsive Design Screenshot
Any idea what I need to look for as I'm running out of possible ideas.
Based on the screenshot we moved away from the Iphone theory and discovered that there was simply a problem in one of the CSS files. We had a false symbol (?) in the file and this triggered that the full CSS was not loaded correctly. It seems though that all other devices were able to compensate the mistake.
Download bootstrap to your web server and include the path in the page, so don't have to rely on another source that could go down. This should fix your problem, if not, then just try Cordova. It is possible that your your phone is being blocked by the bootstrap site because the it is going over mobile network or something like that.
Source: Personal Experience
Regards,
PRO
Related
First of all, this how chrome dev tools show it to me;
it looks normal and responsive, but I tried to send it to my friends and they sent me this;
As you can see, it's nothing like in my phone or chrome dev tools. Only in Iphones it looks like this. I have this code in index.html as well;
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
I also made my friend download Chrome, but it's the same result.
Depending on the devices, the size of certain things may vary. What Iphone does your friend have as well as yourself? This is important because Chrome uses those ratios and sizes to give a representation of how it will/should look. From the picture on your computer, you are testing on an Iphone 6,7 and 8 plus, but based on where the time, battery, etc. icons are on the phone screenshot, It looks as if your friend has an Iphone 10 or later.
You may use CSS media queries in order to have more control over how things are being displayed. not an answer, just a suggestion, but I hope this helps :)
I have an iOS app that basically shows the website inside a webview. On the iPhone 6/6+, the text is blurry when viewed in the app, but looks great when viewed as a regular webpage in Safari. Everything is basically the same in the app and website: same CSS rules, etc., and:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have seen this How to fix blurred text on an iPhone 6 (+), but there's just a comment saying to "add native support." Another answer mentioned to add a new launch image. Is that going to fix blurry text? I'm also not sure where this would be added.
It would be a huge plus if this can be fixed in the HTMl/JS/CSS as opposed to making an update to the native wrapper.
If your app isn't built to support the iPhone 6/6 Plus, then it will emulate an iPhone 5, and just scale things up.
So, yes, you should build an submit a new version of the app, built against the latest iOS SDK, with a launch screen.
I'm pretty new to web development and lately I have been playing around with media queries to optimise my web page when scaled down on various resolutions.
I use the responsive design view in Mozilla Firefox to test my website at different screen sizes but I am having a problem when actually coming to view on a mobile device.
As you can see by the two picture I have attached, when viewing on Mozilla Firefox on the same resolution as my phone (for testing) the display looks a lot larger e.g. the font-size seems to be larger than what it actually is when I view the page on my mobile device.
I've tried researching into how to optimise this without having to create seperate CCS sheets for various displays and would appreciate if someone could point me in the right direction.
Thanks in advance, Sam.
Image 1 : Firefox responsive design view
Image 2 : Mobile view
May be you are missing the viewport declaration?
<meta name="viewport" content="width=device-width, initial-scale=1">
If this doesn't work a fiddle might help see what the issue is.
I have successfully tested the responsive design of my website on an iPhone locally but when I deploy it the responsive design :
works when resizing my browser's size on my desktop
do not work on my iphone
When I say it works I mean I can see it toggles the Bootstrap navigation bar for small devices, uses my custom css media queries, etc.
I have these meta in my html :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The answers I have come across mention the meta tag but it is already present on my site (I used the HTML5 Boilerplate starter). Any other ideas ?
I finally found the issue... Not at all related to my code but to the redirection from my domain name to my hosted page. My provider was using a html wrapper that basically obliterated my HTML tags (and consequently my <meta> tags). What I did was just looking at the HTML and figuring something weird was happenning... I stopped using their odd web redirection and started configuring my DNS right. Everything is working fine now.
One thing you could look for are css media queries which might specifically target iPhones or smartphones and stop them displaying a responsive behaviour, while leaving desktop browsers unutouched.
For example comment out or re-inspect any css media queries that target (min-device-width : x) or (max-device-width: y)
Alternatively, post a URL so we can inspect the css
Good luck
I recently deployed a rails app onto: http://secret-brook-8909.herokuapp.com/
I intended it to look on the iphone 4s to look like it would using: http://responsive.victorcoulon.fr/
If you look at the stylesheet of my rails app you will actually see that i hardcoded all the widths of the containers to be 320px. But when I open it on my browser on my iphone it looks like its being opened on a larger resolution screen. Additionally, on the iPhone if you click the profile button, the button doesn't look the same as it does on a normal browser.
What can I do to fix these issues?
you need to add a viewport declaration on the head of the document
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I can't see any issues in the HTML code and when I shrink my browser it displays perfectly.
When testing with the iPhone be careful of the caching that Safari does. Make sure you clear the cache and also close down any running instances of Safari before trying again.