I've used the wonderful Meteor-Ionic combo for app, but when I view it on my iPhone I can still see the Safari address bar at the top and the Safari tab-bar at the bottom of the screen.
Apologies if this a newbie question, but I've been looking for a solution for hours, without any luck.
is if possible to hide either and hopefully both bars?
The possibilities to modify Safari's UI from a mobile website are quite limited.
You could use the following META tag which hide the bars:
<meta name="viewport" content="......,minimal-ui">
But it has been removed in iOS 8 version and it was only available from iOS 7.1.
Another tag could be used:
<meta name="apple-mobile-web-app-capable" content="yes">
But this is only working when the user adds your website as an application on his homescreen.
I think the best solution is to wrap your application in a Cordova webview using Meteor build tools, see there: https://github.com/meteor/meteor/wiki/Meteor-Cordova-Phonegap-integration.
Thus, you won't have any UI apart the one you provide in you webapp.
Related
I am developing a site which is to also run on mobile devices. I have an issue with both Chrome and Safari on my iPhone 13 Pro Max, iOS 16.2.
The problem is that when I launch my dialog to log in, the content appears to "grow" horizontally, causing what appears to be a "zoom". I have checked every CSS element in my app, and I cannot see anywhere I'm specifying a min-width or anything of that sort that might cause this. Can someone help me pinpoint the issue? Or point me to a resource that can help alleviate this problem?
My site is live here: https://chonk.jambudipa.io
Here is how it looks when you launch the dialog by clicking on "Sign in":
And here is how it looks after pinching to resize the window to fix the size issue, how it should look:
What is going on?? I have tried all sort of meta properties and strange CSS hacks found online, but none of them work.
Ok, so I found a solution in this post.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Works perfectly!
I’m new to web-dev and don’t know if this is working as intended, but it seems odd to me. Briefly, disabling touch even simulation causes my webpage to be rendered differently (see attached photos). Is this due to my code, Firefox dev tools, or something else?
Thanks.
Code Here: Codepen
You need to add following code to the head section (before title tag):
<meta name="viewport" content="width=device-width, initial-scale=1">
From HEAD
meta name="viewport" - viewport settings related to mobile responsiveness
width=device-width means that it will use the physical width of the device (instead of zooming out) which is good with mobile friendly pages
initial-scale=1 is the initial zoom, 1 means no zoom
For more info about viewport tag see: Using the viewport meta tag to control layout on mobile browsers
I'm not sure what the heck is going wrong here. Whenever I preview my site on a renderer like this, example, my site displays differently from an actual phone display. This is making it very difficult to test and adapt for other screen sizes.
I'm doing a mobile-first layout, but everything was working just fine until chrome started acting up (something my department isn't allowed to fix, so that's not an option) which is why I'm resorting to these types of sites. Also, the only other browsers I'm permitted to use are IE and Edge.
Any advice would be appreciated, thanks.
Your page is missing a viewport meta tag in the <head>
Adding <meta name="viewport" content="width=device-width, initial-scale=1"> should make the page render as expected on mobile devices.
Please take into consideration I am pretty new to programming and only know basic things!
Currently, the header on my shop has not got a width set and works fine on the desktop site > feel free to visit to view www.Part-Box.com
However, when the site is loaded on a mobile device or a tablet, the view changes and the header is cut off > you can test this by resizing the browser on a pc. Basically I want the mobile version and desktop version to be exactly the same. There is currently a zoom on the mobile version and half of the header gets cut off.
I've tried setting the header to have a width of 100% in the css which works but completley rearranges everything in the header, can anyone help? thanks guys.
(it would be a lot easier to understand with pictures sorry)
Solution found by removing a line of code
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Per comments above: the OP wanted their website to look the same on desktop and mobile. That is, no layout re-ordering, re-sizing or re-styling.
To do what you want we need the mobile browser to zoom out so the whole page can be seen. This happens to be what mobile browsers do by default.
The reason this is not happening for you is because you are using a meta tag that is widely used for Responsive Web Design layouts:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Remove that tag from the page and you should see the results you are looking for.
**I realize that this isn't an ideal user experience choice but this is what the OP asked for.
I have made an existing site to responsive using twitter bootstrap. When I check the responsiveness by resizing the browser it works fine and perfectly fit in the viewport window. But when I check the site across mobile and tablet it does not work and show the default desktop layout. I have used meta viewport tag and respond.js But It does not work anymore. I can not understand why the site does not resonsive in specific mobile device.
Can you help me out from this issue? I can not preview the code in here, because I can not understand where is the problem exactly.
My demo site: playbox
Because of
<meta content="width=1024" name="viewport">
set
<meta content="width=device-width" name="viewport">
Remove second one width=1024 and you'll be good to go :)