Setting up the HTML meta viewport for a full 100% width display

Question

Setting up the HTML meta viewport for a full 100% width display

Is there a way to display my website on mobile devices at 100% width in both landscape and portrait views?

I attempted using this HTML code without any CSS styling:

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>test page</title>
</head>
<body>
    <div style="width: 1000px; background:#ff0">hello world</div>
</body>
</html>

While it appears correctly in landscape view, the issue arises when viewing in portrait mode as it is zoomed in as though it were still in landscape view.

What recommendations do you have for achieving the desired outcome?

android ios css html

Answer 1

Answer №1

Upon loading your HTML in a basic WebView, everything appears to be functioning properly from my end. It's possible that the issue lies with your layout rather than the HTML itself?

Here is the straightforward WebView implementation I utilized:

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webViewMain"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>

Furthermore, here is the onCreate method I employed to evaluate your code:

WebView webView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

webView = (WebView)findViewById(R.id.webViewMain);
webView.getSettings().setJavaScriptEnabled(true);
//webView.loadUrl("http://www.google.com");
String data = "<!DOCTYPE html> <html lang=\"hu\"> <head>     <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">     <title>test page</title> </head> <body>     <div style=\"width: 1000px; background:#ff0\">hello world</div> </body> </html>";
webView.loadData(data, "text/html", Encoding.UTF_8.toString());
}

Answer 2

Upon loading your HTML in a basic WebView, everything appears to be functioning properly from my end. It's possible that the issue lies with your layout rather than the HTML itself?

Here is the straightforward WebView implementation I utilized:

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webViewMain"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>

Furthermore, here is the onCreate method I employed to evaluate your code:

WebView webView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

webView = (WebView)findViewById(R.id.webViewMain);
webView.getSettings().setJavaScriptEnabled(true);
//webView.loadUrl("http://www.google.com");
String data = "<!DOCTYPE html> <html lang=\"hu\"> <head>     <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">     <title>test page</title> </head> <body>     <div style=\"width: 1000px; background:#ff0\">hello world</div> </body> </html>";
webView.loadData(data, "text/html", Encoding.UTF_8.toString());
}

Answer 3

Answer №2

Regarding your reply to my previous comment:

I am confident that the desired behavior is actually already set as the default. By including width=device-width in the viewport, it mimics the action of resizing a browser window on a desktop.

If you decide to eliminate this portion from the content attribute, it should function according to your preferences.

Answer 4

Regarding your reply to my previous comment:

I am confident that the desired behavior is actually already set as the default. By including width=device-width in the viewport, it mimics the action of resizing a browser window on a desktop.

If you decide to eliminate this portion from the content attribute, it should function according to your preferences.

Setting up the HTML meta viewport for a full 100% width display

Answer №1

Answer №2

Similar questions

Executing a query within a loop in Back4App (Parse)

How can I retrieve HTML with JavaScript enabled?

Why does the interface vary across different devices within the storyboard area when constraints are applied?

The runtime is experiencing difficulty in loading the Bootstrap files

Creating the code for a button that switches between views using a TabBarController

Converting Sound Files to Binary Code Using Swift

What is the best way to adjust text to a specific width on an HTML canvas?

In the event that the identifier changes, initiate a fresh iteration of the loop

Challenges with saving and retrieving custom objects in NSUserDefaults using Objective-C

The encoding of Base64 in Swift does not translate correctly on Android devices

"Troubleshooting Xcode Configuration Problems: A Team Member's Guide

What is the method for identifying when a user clicks the button on the native scrollbar?

Gather data from a span class (Web Development)

Every second, didUpdateLocations persistently calls with deferred updates

Guide on setting up a shortcut key for an input field

Tips on disregarding events within an html table

Measuring the space between components

How can I change the background image using CSS instead of HTML?

Using Rails and HAML to incorporate looping HTML5 video tags

Display or conceal Div elements depending on the selected Radio Buttons, with their values retrieved from a database