Does anybody fix the viewport in mobile? - Using CapacitorJS
Hello I'm having issues with my metronic app, I'm trying to export it with CapacitorJS to iOS and Android but.. the new phones has some notch and right now just using the browser you want to use 100% of the nav viewport but using native apps (capacitorJs) you dont want the 100% because you have issues with the notch.
So, doing some research I found: https://community.redwoodjs.com/t/full-guide-on-using-capacitorjs-to-build-a-native-ios-app/4665
At the "Our app overlaps with the status bar and home bar"
And exactly like he metions I have the same issue like in the img attached.
The issue here is that he teach you how to solve it and I already tryed with the angular demo1 but its not working I guess.. because the CSS used with metronic so.. does anybody already fix this?
Replies (4)
Try to upgrade your Capacitor version to the latest.
Try to remove the contentInset parameter from your capacitor.config.json file. This parameter may cause the inconsistent bug that you are experiencing.
You can also try to use the viewport-fit=cover meta tag in your index.html file to make your app fill the entire screen.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">I hope these solutions help you fix your viewport issue.
Hi Arturo Solano,
You might consider the following approaches:
Ensure that your app's HTML includes a viewport meta tag that adjusts the layout viewport to the device's width and sets the initial scale to 1. This can help in managing the viewport across different devices and screen sizes.
<meta name="viewport" content="width=device-width, initial-scale=1">Capacitor provides a plugin called @capacitor/device that allows you to get information about the device, including safe area insets. You can use this information to adjust your layout accordingly, especially to avoid overlapping with the status bar, notch, or home indicator.
import { Plugins } from "@capacitor/core";
const { Device } = Plugins;
async function getSafeAreaInsets() {
const { safeAreaInsets } = await Device.getSafeAreaInsets();
console.log("Safe Area Insets:", safeAreaInsets);
}You can use CSS media queries to adjust your layout based on the device's screen size and orientation. For example, you can define different styles for devices with notches or devices in dark mode.
@media (max-width: 600px) {
/* Styles for smaller screens */
}
@media (prefers-color-scheme: dark) {
/* Styles for dark mode */
}Hi Faizal,
Thank you for your reply.
About the <meta name="viewport" content="width=device-width, initial-scale=1" /> its already in my index.html
about the @capacitor/device I already tryed something similar but not exactly what you mention I will try, but.. that should be in the app.component right? To apply to the all app.
And.. if I got that safeAreaInsets what should I do? change the layout component?
I just set in the capacitor.config file
ios: {
contentInset: 'always',
That hot fix my problem in ios, is like a hot fix because.. when having dark mode the area at bottom and top keep white and its weird, in addition that this hot fix is just for ios.
Does anybody have a better solution?
