I am trying to fix some layout issues with browsers on tablets. And currently the browsers on surface and Android works okay, but there are some problems with Ipad.
This the main page displayed by an Android Tablet browser:
And this is the main page displayed by Ipad (safari and chrome)
The webpage is using bootstrap and the URL is http://hra.case.edu.
Here is my meta tag
<meta name="viewport" content="width=device-width,initial-scale=1">
Also I set a min-width=100% to the header div, but it seems to be useless in a certain page on iPad, please see this image:
Anyone has some ideas about those problems?
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'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'm developing the mobile version of a web and the client requested me to allow zooming.
The problem is that in some browsers (like the iexplorer of windows phone or the browser of android) it makes a normal zoom without resizing the window, so the elements simply are viewed bigger, but in other browsers (Safari on ios or chrome on android) it makes a "responsive" zoom, resizing the window and adapting the elements to the new size, changing their positions.
The client has seen this inconsistency and he likes the first type of zoom, so he asked me if i could make this "non responsive" zoom working on all the devices.
I have been researching how to do it but i didn't find anything about the browsers making different zooms or how to avoid the second type of zooming. So if anyone could explain me anything about this i would be very grateful. Thanks.
Add this to your HTML inside the <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
My client has reported a stange issue with his website. URL of the web-site is your-montenegro.me
A stange white space appears at the bottom of the page when it's loaded on Android-based browser. Here are the screenshots:
Huawei Ascend, Android 4.3: http://i60.tinypic.com/90vuyw.png
HTC Desire S: http://i61.tinypic.com/2pyayk1.jpg
When I try to open this web-site:
Windows Phone 8.1 IE10: No white-space
Any Windows/Linux-based browser: No white-space
Do you have any idea what to try?
I have tried playing view browser viewports but wasn't able to come with a solution.
Edit:
Also, when I load this page on Huawei Ascend first time, site appears a bit zoomed in (which is totally fine/expected), but scrolling down still reveals the white-space.
Edit2 (screenshots):
Huawei Ascend:
HTC Desire S
I tested the site using the viewport below and it appears to fix the issue.
<meta name="viewport" content="width=device-width, user-scalable=yes">
The problem is because most mobile devices have a pixelRatio of 2. This causes your forced height of 960px to become 1920px because the mobile browsers believes that's what you meant. Since your background isn't 960px you get all the white space.
I only tested this using the Chrome Emulator which you can learn more about at https://developer.chrome.com/devtools/docs/mobile-emulation which lets you emulate a ton of mobile devices easily.
I just want this to display the same on computers and on mobile devices, not doing any responsive design for this project.
I've gone through the CSS and commented out everything having to do with a mobile version.
However, my site is still displaying incorrectly on mobile devices. The content is showing as desired (for the most part), but the background is shrunk and narrow like it is trying to display at the mobile page-width.
I've tried multiple devices, so this is not a cache problem.
Can anyone tell me where I am going wrong?
http://www.carolinafarmstewards.org
Here's an image of what it looks like on my phone:
Try removing <meta name="viewport" content="width=device-width" /> from the head.