Resizing body div to fit screen in iOS using Xcode for Cordova/PhoneGap

Question

Resizing body div to fit screen in iOS using Xcode for Cordova/PhoneGap

Just delved into the world of cordova/phonegap and managed to create my inaugural app. It's a work in progress, but I've hit a roadblock that I am struggling to navigate.

During testing on both the simulator and actual device, I noticed some black margins appearing at the top and bottom (specifically in landscape mode). When I touch these black borders, I can manipulate the content by adjusting it to fit the screen (it exceeds the dimensions but maintains proportions). Consequently, I find myself constantly moving the content up and down to view everything properly (sometimes also from side to side).

Any tips on how to ensure my content fits the screen correctly? Since I do not have a header or footer, all I need is for my body div to adapt to the screen and remain fixed there.

Appreciate any assistance.

html ios css cordova

Answer 1

Answer №1

To set the size manually, you can define it in the AndroidManifest.xml file

When the configuration switches to landscape mode, the activity is terminated and then restarted. To enhance speed and preserve data, you have a couple of options:

You can create a custom java object that stores crucial state configurations using the onRetainNonConfigurationInstance() method, which is called between onStop() and onDestroy(). This method returns an object that can be retrieved using getLastNonConfigurationInstance() in the onCreate() method.
A similar approach can be taken by utilizing fragments. Since the hosting activity is killed and recreated, it also terminates the attached fragments. To avoid this, add the following code snippet inside the onCreate() method:
```
onCreate(Bundle b){
//code
setRetainInstance(true);
}
```
By setting setRetainInstance(true), the fragment is retained, detached but not destroyed, hence preventing it from being recreated.
Another way to prevent shutting down and restarting is manual reconfiguration. Specify the configuration changes your activity manages in the "AndroidManifest.xml" file. When a configuration change occurs, the onConfigurationChanged() method is triggered.

Answer 2

To set the size manually, you can define it in the AndroidManifest.xml file

When the configuration switches to landscape mode, the activity is terminated and then restarted. To enhance speed and preserve data, you have a couple of options:

You can create a custom java object that stores crucial state configurations using the onRetainNonConfigurationInstance() method, which is called between onStop() and onDestroy(). This method returns an object that can be retrieved using getLastNonConfigurationInstance() in the onCreate() method.
A similar approach can be taken by utilizing fragments. Since the hosting activity is killed and recreated, it also terminates the attached fragments. To avoid this, add the following code snippet inside the onCreate() method:
```
onCreate(Bundle b){
//code
setRetainInstance(true);
}
```
By setting setRetainInstance(true), the fragment is retained, detached but not destroyed, hence preventing it from being recreated.
Another way to prevent shutting down and restarting is manual reconfiguration. Specify the configuration changes your activity manages in the "AndroidManifest.xml" file. When a configuration change occurs, the onConfigurationChanged() method is triggered.

Answer 3

Answer №2

After trying various solutions, I finally found one that worked perfectly for me. The key was to make a simple adjustment in my CSS by adding the following lines within the body tag:

position: absolute;
top: -16%;

As a result, my body div shifted upwards on the screen, allowing my content to be positioned correctly.

Answer 4

After trying various solutions, I finally found one that worked perfectly for me. The key was to make a simple adjustment in my CSS by adding the following lines within the body tag:

position: absolute;
top: -16%;

As a result, my body div shifted upwards on the screen, allowing my content to be positioned correctly.

Resizing body div to fit screen in iOS using Xcode for Cordova/PhoneGap

Answer №1

Answer №2

Similar questions

Is there a way to modify the standard width of semantic-ui sidebars?

The value property of the input element is returning as undefined

Connecting a string array to the navigation bar

What might be causing the excessive margins in my Bootstrap grid layout?

I'm getting a warning for setting the delegate of my FetchedResultsController - what am I doing incorrectly?

What is the best way to assign a percentage width based on a variable in jQuery?

Pressing the menu button will trigger a function that halts after the third click

Expand and collapse navigation menu using Jquery

The HTML image tag is malfunctioning on a Windows system

Desynchronization of jQuery

Using the "position: absolute" property will not contribute to the

Ways to align and fix a button within a specific div element

What is the functionality of 'min-height: 100vh' when child elements stack due to a small width?

HTML page filled to the brim with data tables

I am attempting to update the background image pattern every time the page refreshes. Despite trying numerous codes, I have not been able to achieve the

The specific serviceUUIDs were not triggering the didDiscoverPeripheral function in CoreBluetooth, but it worked perfectly when set to

Using JavaScript to parse an XML document on a WAMP server

Error in Javascript caused by the use of Jquery's "hide on load" feature

Adjust the size of a nested div within a bootstrap container

Is there a way to incorporate CSS into an element utilizing jQuery when only a class is available for identification, and when the time in the innerHTML is within a 5-minute range from the current time?