the iframe is not properly displaying the embedded responsive page

The primary webpage incorporates the responsive mobile page created with the JQUERY SUPERSLIDES plugin. The mobile page appears correctly when viewed directly on an iPhone using Safari. However, when it is embedded in an iframe, it does not display as expected on iPhones (as shown in the second screenshot below, only a portion of the image is visible).

main.html

<iframe id="ifrmadcontainer" seamless="seamless" scrolling="no" frameborder="0" style="width:100%;height:100%;" src="touch.html">
</iframe>

The touch.html can be found at http://jsfiddle.net/w1vcrLy8/

Appearance on Desktop Safari and Chrome:

Appearance on iPhone Safari:

cssresponsive-design

Answer №1

Does the meta device-with tag exist both inside the iframe and outside on the page that embeds it?

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

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

The perspective property creates discrepancies in transform behavior between Firefox and Chrome, resulting in unexpected outcomes

While I found a similar question here, the solutions provided are outdated and do not help in my case. My issue revolves around a turning page effect that utilizes the CSS properties of transform-style:preserve-3d and perspective to create a 3D page. The ...

htmlcssfirefox3dperspective

Enhance each category changing with jQuery page transitions

Is there a way to add page transitions based on category names and quantities in PHP? For example, when clicking on the "office" category, can a popup overlay be displayed with the category name and quantity while the content loads? The focus is on creat ...

javascriptphpjquerycss

Determine the total quantity of colored cells within a row of an HTML table and display the count in its own

I need assistance with a table that has 32 columns. From columns 1 to 31, I am able to fill in colors by clicking on the cells. However, I now want to calculate and display the number of cells that are not colored in the last column. This task must be co ...

javascripthtmlcss

Having trouble with Firefox not recognizing the linear gradient color in my CSS3 code

I'm working on implementing a linear gradient background using CSS, but I'm facing an issue with Firefox not displaying it correctly. body { height: 100%; /*background-color: #F0F0F0;*/ background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ ...

cssfirefox

Converting Umbraco Json to a CSS class named "[]"

I'm currently using Umbraco with the data-type grid layout and I am trying to add custom settings (CSS classes) to each row/cell. The results are somewhat working, but I want to improve it. Here's the user interface: https://i.stack.imgur.com/iY ...

htmlcssjsonumbracoumbraco7

How to incorporate Django syntax into CSS styling

Imagine a scenario where a Django site is equipped with numerous stylesheets. CSS and JS files are located in the static/ directory within an app's folder or in the global site directory. Various color themes are employed across different pages, neces ...

pythondjangocss

Retrieve a particular HTML element from an object that has been mapped

After reproducing my issue on a smaller scale for easier handling, I am now aiming to implement an onclick function that reveals the hidden content inside each column. The plan is to initially hide the content using display: none and then switch it to disp ...

javascripthtmlcssreactjs

Prevent a div from being displaced by the transform property once it reaches the window's border

Is it possible to prevent the viewer I created using CSS transform from moving when its borders reach the window borders? Should I consider using a different method instead? If you'd like to see the code, you can check it out here. var x=0, y=0 ...

javascriptjquerycssbordertransform

What's the best way to combine cells using HTML, CSS, and PHP?

Can anyone assist me with merging cells containing identical values in specific columns? <td style="text-align: center; font-size: 9.5px;">{{$endereco->quadra}}</td> <td style="text-align: center; font-s ...

phphtmlcss

Steps to insert a logo into a Bootstrap navbar

Hey there, I'm having trouble fitting my logo into a Bootstrap navbar. The issue is that the logo appears larger than the navbar itself, and I've tried various solutions without success. Can someone please assist me with this problem? Below is th ...

jqueryhtmlcssasp.nettwitter-bootstrap

A guide on using key arrows in JavaScript to navigate and focus on elements

When working on my HTML project, I have a list of elements that I want to be able to select using the arrow keys. I've included my code here for reference: [http://jsfiddle.net/T8S7c/] What I'm trying to achieve is when the arrow keys are press ...

javascripthtmlcss

Is there a way to set the size of my unique carousel design?

Having some trouble with my modal image carousel; the dimensions keep shifting for different image sizes. Image 1 Image 2 ...

htmlcssangularuser-interfacecarousel

What is the process for moving a tap-target button with materialize css?

Looking for tips on how to relocate a tap-target button that's currently stuck in the bottom right corner of the screen. I've experimented with various methods like adjusting margins, padding, and even nesting it in an outer div, but nothing seem ...

cssmaterialize

hyperlink triggers spacing problem in Internet Explorer

When displaying a paragraph of text, I add a "read more" link at the end if the text exceeds a certain length. However, in Internet Explorer (IE), the line with the link appears separated from the line above, creating an awkward look. To see where this is ...

phphtmlcss

Tips for preventing divs from sliding to the next row when adding margin in Bootstrap

{% for plant in plants %} {% if forloop.counter0|divisibleby:3 %} <div class="row row-cols-3"> {% endif %} {% include 'included/_plant_cell.html' %} {% if forloop.counter|divisibleby:3 %} </div&g ...

htmlcssdjangobootstrap-5

Tips for accessing images in Angular 24 lazy loaded modules

I have a collection of images that need to be shared throughout my application. There are 2 lazy-loaded modules - Login and Overview. The image I require is located in src/assets/images/logo.png and needs to be accessible in both the Login and Overview com ...

imagecssangular

Center the background image at the halfway mark on the screen

Can someone help me figure out how to position an image so that it appears exactly at the halfway point of the screen? I've researched different ways to position images within a div, but I'm struggling with positioning it on the entire screen. ...

htmlcss

What is the best way to create separation between the href attribute of an a tag and the

Currently, I am utilizing Material UI in React and encountering an issue with the spacing between an <a tag and some text both before and after it. The lack of space is causing them to merge together. <Typography style={{ fontSize: 14, textAlig ...

cssreactjsmaterial-ui

What methods can be used to ensure a div reaches all the way down to a sticky footer?

I'm currently working on a layout with a sticky footer, and I have a specific div that needs to extend all the way down to the footer. However, simply setting the height to 100% doesn't achieve the desired result. I've also experimented with ...

htmlcsssticky-footer

Control the switch for CSS selectors

Consider the following scenario where CSS rules are defined: <style> table {background:red;} div {background:green;} </style> In addition, there is HTML code that calls a JavaScript function: <table onclick="tu ...

javascripthtmlcss