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.
Related
I'm trying to get my website to fit inside my phone screen. I have tried many variations of env(safe-area-inset-bottom) and constant(safe-area-inset-bottom) but both always return 0px (I've been using an app called Inspect to debug CSS on my iPhone 13).
Here's a link to the github repo. All code that relates to this issue should be in /src/app.tsx. Here is a link to the live site if you want to see the problem yourself.
UPDATE: I've been doing some testing and have found that in portrait mode, safe-area-inset-* is ALWAYS 0px, but in landscape mode it works as expected. Does this mean that safe-area-inset-* isn't the correct solution for ios 15 safari? Clearly the url bar obscures the 'safe area' in portrait mode...
I've made sure to add <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> to my head tag but this has no effect. Could someone please explain how I can ensure that my site doesn't go past the bottom URL bar on ios 15 Safari? I've attached screenshots from my phone showing the problem:
I think I made it work using -webkit-fill-available the other day which respects safe area.
body {
min-height: -webkit-fill-available;
}
I have made a simple website for a event in my town and it is hosted on AWS Amplify from Amazon. At first there was no custom domain coupled to it and so the domain name was some random url. On this url the website worked, for web and mobile. But then I asked the previous domain owner if he could couple the custom domain to this site. He did the but when I opened the website on my phone it wasn't responsive anymore, it was shown the same way as on web.
I then checked the AWS Amplify console and saw that the SSL verification failed. I'd think that it only causes the website to be hhtp instaid of hhtps but could this problem be related?
Or could the problem be a setting in the dns file or something?
I saw some similar problems were because this line wasn't added :
<meta name="viewport" content="width=device-width, initial-scale=1">
but I made the website with Angular and this line is automaticly added to the index.html file.
my previous responsive website: https://master.dkog5qeqqzcy6.amplifyapp.com/
the unresponsive website: http://www.tongerloleeft.be/
Thanks in advance.
Console looks clean, the page appears to be responsive on my end(using chrome, Firefox and Chrome Edge desktop revs.)
It's not responsive on native Andriod because the #media screen size appears to be responding at less than 640 and the default viewport of a mobile is 640 so it's never getting hit.
Also..... Why are you running it in a frameset?
<frameset rows="100%,0" border="0" frameborder="0" framespacing="0" framecolor="#000000">
<frame src="https://master.dkog5qeqqzcy6.amplifyapp.com">
</frameset>
I'd say that is the problem. Not viewport size after having a second look.
It is also responsive for me you could be using Microsoft Edge Legacy if so I recommend updating it. I have just used the new Microsoft Edge to view this as well as Chrome.
You can update here:
https://www.microsoft.com/en-us/edge
You can also use (if you are not already using) Developer Tools in Chrome and Edge to view screen sizes of devices. You can use the shortcut keys Ctrl, Shift, I
I'm currently learning React and trying to build a simple website. Here it is on Codesandbox.
I want the site to be responsive, and I've added what I believe to be the necessary CSS and HTML, like #media screen and (max-width: 600px) and <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
The site displays as expected in the browser, tested on Chrome and Firefox.
My problem is that when I run the site on the development server with npm start it behaves nice and responsive on the phone. However when I run npm run build and then serve it from a web-server with URL and all, the phone just displays it as a zoomed out desktop site. I've tried this on an Android and an iPhone.
I've searched but can't find a similar problem.
I would greatly appreciate any help.
It turns out that the problem was that where I got my URL used a www-forwarder that wrapped my page in a frame. This ruined the responsiveness.
By changing the URL to a DNS service instead, the wrapper was removed and my site worked as expected.
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
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.