Using JavaScript, adjust the screen orientation, width, and height

Is there a way to manually adjust the screen properties of a dynamically generated iframe? I am looking to set orientation, width, and height in order to simulate a "mobile" view within that iframe.

I have prepared two separate fiddles for this:

The parent: https://jsfiddle.net/mooioom/69240vec/

The "device": https://jsfiddle.net/mooioom/19tsk4L8/

  1. The parent opens an iframe pointing to the "device" with iPhone resolution dimensions 375x667.

  2. The "device" contains a media query to match the iPhone resolution and should change the button color from green to yellow if detected. However, this doesn't happen, possibly due to the detected screen.width and screen.height dimensions.

So, my question is how can I set screen.width and screen.height of the "device" at creation time from the parent?

--- update ---

As Gezzasa mentioned, changing the media query from min-device-width to min-width makes it work. However, for a comprehensive solution, I still want to know how to make the iframe believe that it's being viewed on a mobile device. I've come across information suggesting that this involves modifying headers and user-agent because some responsive techniques target the user-agent to determine if it's a mobile device.

Putting that aside, the main question remains - how do you dynamically set the screen.width and screen.height (and orientation) for an iframe from a parent window?

javascripthtmlcssiframe

Answer №1

The issue lies in the query as the iframe is not being loaded from a device, so using "min-device-width" will not be effective. Instead, try using "min-width" and "max-width" without specifying a device, and that should resolve the problem.

Answer №2

Hopefully this solution works for you

var element=document.getElementById("element");

var iframe = document.createElement('iframe');
iframe.setAttribute('id', 'iframe');
element.appendChild(iframe);
var iframeId=document.getElementById("iframe");
iframeId.style.width="250px";
iframeId.style.height="150px";
<div id="element">

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using curly brackets as function parameters

Can someone help me understand how to pass an emailID as a second parameter in curly braces as a function parameter and then access it in AccountMenuSidebar? I apologize for asking such a basic question, I am new to JavaScript and React. class Invoices ex ...

javascriptreactjsnext.js

Tips for successfully using `cols=""` within a grid container alongside a textarea

It seems that both Chrome and Firefox are not following the cols attribute on textarea elements within a grid container: .grid { display: grid; } textarea:not([cols]) { width: 100%; } <h2>Not in a grid container:</h2> <div> <tex ...

htmlcsstextareacss-grid

I encountered an error while setting up Vue.js on my computer

While attempting to install Vue.js on my system using the command npm i -g @vue/cli, I encountered the following error: npm WARN cleanup Failed to remove some directories [ npm WARN cleanup [ npm WARN cleanup 'C:\\Users\\ ...

javascriptnode.jsvue.jsnpmvuejs2

Utilizing the state as a condition within the useEffect to update the component

Is there a way to automatically hide the mobile menu when the URL changes in ReactRouter? I have noticed that I get a warning for not tracking mobileOpen as a dependency, but strangely the code still works fine. const Navbar: React.FC<Props> = props ...

javascriptreactjsreact-hooks

How can Three JS and an image be combined to make a custom 3D cookie cutter?

I am currently working on a project that involves extracting the edges of a black and white image. My goal is to then generate a 3D model that highlights the edges of the black shape, extrudes the edges for depth, adds thickness to the walls, and creates ...

javascriptphpthree.js

Menu becomes sticky too quickly on iOS Safari and Chrome, jumping to fixed position prematurely

Feeling frustrated with this seemingly straightforward code challenge. My sticky menu is causing me headaches on iOS devices, particularly the iPhone 6 running the latest iOS. It seems like the menu jumps into its fixed position too early, leading me to be ...

javascriptjquerycssfixedsticky

Using jQuery, check if a click event triggers a div containing a specific class. If so, modify the value of another class

I am working on a code for an application that allows you to select an icon and see the corresponding CSS line displayed. This makes it easy to copy and paste the code for use in another project. The issue I am facing is with the $(this) selector. Even tho ...

javascriptjqueryhtmlthis

Is there a way to display a success message once the button has been activated?

<template> <div> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" v-model="firstName" placeholder="Enter ...

javascriptnode.jsvue.js

Enhancing Efficiency with Laravel 5: Updating Multiple Data Entries

My Simple Todo App lacks the ability to persist multiple record updates simultaneously. The client-side version can be found here: http://codepen.io/anon/pen/bVVpyN Whenever I perform an action, I send an HTTP request to my Laravel API for data persistenc ...

javascriptphpajaxlaravelvue.js

using css styles in an angular component of a web application

I am currently developing an Angular 2 application with ASP.NET WebAPI 2 to retrieve data. Instead of using ASP.NET cshtml pages, I am utilizing HTML pages to display the content. Within my application project, I have two CSS files - Bootstrap.css and Site ...

htmlcssangular

What is the recommended element for managing data in React?

Let's consider a scenario where we have 2 main components: class App extends React.Component { state = { comments: [1, 2, 3, 4] } render() { return ( <Comments /> ) } } class Comments extends React.Component { rende ...

javascriptreactjs

Selecting multiple rows on a Lazily Loaded jQuery Datatable

Currently, I am utilizing a lazy loaded (Deferred) jQuery Datatable and attempting to implement multi-row selection. However, every time I switch to another page of the datatable, the selected rows from the previous page get cleared. // Here's how yo ...

javascriptjqueryajaxdatatable

Angular: controller's property has not been initialized

My small controller is responsible for binding a model to a UI and managing the UI popup using semantic principles (instructs semantic on when to display/hide the popup). export class MyController implements IController { popup: any | undefined onShow(con ...

javascriptangularjstypescript

Is there a way to programmatically close Chrome that is running in Kiosk mode?

Currently, I am facing an issue with my Angular 9 app running in Chrome within a Kiosk mode environment. I urgently require a solution to close the Chrome browser as there is no keyboard attached to the PC handling the app. Is there a way to achieve this ...

javascriptangulartypescriptgoogle-chromekiosk

Provide a response containing JSON data extracted from an HTML file

I am looking for a way to create a simple REST API using a hosting site that only allows hosting of HTML files along with JavaScript files. I want to be able to send POST/GET requests and receive JSON data in response. For instance, when making a GET requ ...

javascripthtml

Removing duplicate data from Table TD and TR elements using Jquery

I am working on an HTML table and I need to remove duplicate values in each <tr> and <td> data cell. Here is a snippet of my code: <table width="100%" id="l2table"> <thead><tr> ...

javascriptjqueryhtml-tableduplicatesremovechild

Is it possible to view the frames/packets being transmitted from an EJS or HTML form to the Express backend using Express Js?

My current computer science assignment involves visually representing the data transfer process between a frontend and backend. I don't need to show the full data, just the flow of chunks and how it navigates through protocols. Could someone please g ...

javascriptnode.jsformsexpressejs

I am experiencing issues with the functionality of front-page.php on my WordPress website

Seeking guidance in addressing a web development issue: I have encountered a problem with a website that I am currently working on locally using WordPress. I added the following code to the header.php file: <link rel="stylesheet" type="text/css" href= ...

javascriptphpjqueryhtmlwordpress

Guide to setting a Spring form checkbox to read-only status using JavaScript

Is there a way to make a spring form:checkbox tag readonly through JavaScript instead of using the disable function like document.getElementById('id').disabled = true? When I use disable, it doesn't set the value to the command object. ...

javascriptspring

Using `justify-content: space-around` on a nested element within a class will not produce the desired spacing effect

This particular piece of code is functioning correctly: aside { /* Customize styles for the aside element */ flex: 0 0 40px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; background-color: #2800da; ...

htmlcsssassflexbox