We want to load a responsive website inside a DIV somewhere on a page. This div is smaller than the view port. The CSS that applies to this DIV (and thus responsive website) uses media queries to alter it's appearance.
The problem is that these media queries use the actual view port of the complete page rather than the width of the DIV that contains the responsive website. Due to this the responsive website may look all wrong.
Is there any way to alter the view port size that the #media queries use? Or any way we can influence the view port on a desktop device?
Note that due to certain limitations we CAN NOT use an iFrame. An iFrame would solve the problem.
Related
Just discovered this code and implementation of lightbox2 and added the needed code to some of my webpages.
Looks very good o desktop and also on tablet but I don't like the lightbox in mobile view.
The pictures that are shown on mobile are smaller than the 'normal' responsive view that I get when not using lightbox2.
So my question is in the title: How can I disable the lightbox on mobile?
Regards Arno
Unfortunately this is not possible at this time. The Lightbox script on load will attach event handlers to the target images.
To get around this, you can use different markup on mobile and show hide the content with CSS media queries.
I have a page written in AngularJS and Material Desing for AngularJS. MD is a responsive user interface, and in this page I have placed a responsive ad unit.
The problem is that it seems that this responsive ad unit is not taking advantage of the responsiveness of Material Design and is always displaying ads in the smallest unit possible.
The ads are being displayed inside a md-card and I have a feeling that they are not able to correctly detect the element's width and height, and that's why it's displaying the smallest ad unit available always - on mobile or even on a desktop.
The page is live here, you can check its source code.
I am trying to create a testing site for clients where they can change the resolutions of the site by pressing one of the icons in the header.
I've added the icons and wrote jQuery that changes width of the main-wrapper.
However since the site is based on bootstrap, the responsive part wont work since it's not firing off any media queries so i figured to wrap it all in an iframe and by reducing iframe width media queries should work.
The problem I am having is that by putting
<iframe src="index.php">
</iframe>
creates infinite loop. I've tried putting in in the header.php, page.php, content-page.php and each time it just keeps on loading iframes.
How do you pull entire wordpress site through iframe to use it on the same site?
I've completed my responsive design, except the adsense implementation.
When for example a visitor changes the orientation of the tablet, the size of the ad should change automatically.
At the moment, I'm not getting it to work without a page refresh.
The ad only changes when I refresh the page, but that's not what a visitor would do.
According to Adsense support it has already been implemented:
Support for ad size changes after a screen orientation change. If your responsive page changes its layout following a device orientation change (e.g., when a tablet or phone goes from portrait to landscape), we’ll request and load a new ad of the correct dimensions to fit the new page layout.
However, I'm not getting it to work. Am I understanding it the wrong way, or am I missing something?
If it's not supported by Adsense yet, is there a workaround (allowed by adsense)?
EDIT: I just found out it is actually working on my smartphone. It just doesn't work with window resizing, but that's not really a problem. So I guess this is solved.
Pay close attention to the official "Technical considerations" at About responsive ad units
Your site uses third-party JavaScript
The parent container has no width set
In my case, responsive design was not setting an explicit width on viewports below 467x. As a result, the units would resize when going from portrait to landscape, but not vice versa from landscape to portrait. This resulted in a an ad unit stretching the content column wider than the viewport, and worse no ability to zoom out.
Setting an explicit width for the ad unit using a media query solved the issue, and now the units resize and cache exactly as described.
Is it possible to add more than one viewport in an application. Since we can add other containers more than one time and viewport is also a container.
I think of the Viewport as representing all of the possible viewing space of the web browser window. It is a special Container that re-sizes as the web browser re-sizes. In a full screen ExtJS application, all the other containers should all be nested under the single Viewport so that they can re-size themselves relative to the browser window as well. For this reason there is no concept of multiple ExtJS Viewports.
If, instead of a full screen ExtJS application, you wish to have multiple ExtJS widget applications embedded in div tags of some static html page then Viewport should probably not be used. Container or Panel objects can be the top level parent.