Simulate a mobile device on PC web with iframe - javascript

I want to preview a mobile page on a PC page which has an iframe to simulate a mobile device. But mobile event can't be supported in iframe such as sliding.
How to totally simulate a mobile device by iframe?
<div class="preview>
<iframe src="http://path.to.my/mobilePage.html"></iframe>
</div>
.preview{
width:375px;
height:812px;
}
.preview iframe{
width:100%;
height:100%;
}
P.S. CROSS MODERN BROWSERS.

Chrome has the function you wanted.
https://developers.google.com/web/tools/chrome-devtools/device-mode/

<iframe src="https://stackoverflow.com" width="255" height="320"></iframe>
Check this : http://mattkersley.com/responsive/
But in the technical side: you can use height and width and the content will respond to that.
And also if you want to test your site with its mobile events, try using the built in chrome/firefox extension just press Ctrl+Shift+M

Related

React no enabled plugin supports this MIME type for PDF in Iframe on Tablet & Mobile device toggle

Trying to display a PDF in an iframe, it works perfectly on desktop view, but when I try to load it from Tablet or Mobile it does not display. The body element of the iframe then says "no enabled plugin supports this MIME type". I can, however, load the PDF on desktop view then change to tablet or mobile and it will display. Any ideas on how to get it to load on the tablet and mobile views?
Here's the iframe:
<iframe id="documentObject" name="documentIframe" src={fileSrc} title={fileName} height="100%" width="100%" />

IFrame not respecting user agent

Inside a website I have an iframe that loads another website, like the code below :
<iframe style="border: 0; width: 100%; height: 100%" src="https://www.mywebsite.com"></iframe>
It's working BUT the iframe does not respect the user agent. The www.mywebsite.com has specific versions for mobile and desktop, but when I open it inside the iframe in a mobile device, it will load the desktop version instead. If i open the same site directly on the URL on the same mobile device, the correct version (the mobile one) is shown.
What should I do on the iframe code to it loads the mobile version instead?
<iframe style="border: 0; width: 100vw; height: 100vh" src="https://www.mywebsite.com"></iframe>
Try this code instead I think it will work

Content inside iframe is invisible at IOS (Iphone & IPAD)

Hello following iframe code is not getting displayed at iPhone at all. It loads fine on other browsers and Android mobile browser. On Safari desktop browser, I need to specify
iframe onload=iFrameHeight(700) to make it displayed. However this still does not help for iPhone.
Any ideas?
Thank you.
<div class="contentpane"> <iframe onload="iFrameHeight()" id="blockrandom" name="iframe" src="http://www.maxhire.net/cp/?E5586A361E43515B79561C6532531A2604" width="100%" height="700" scrolling="no" align="top" frameborder="0" class="wrapper"> This option will not work correctly. Unfortunately, your browser does not support inline frames.</iframe> </div>

Internal Links within IFrame doesn't working in iphone safari browser

The source code is :
<iframe id="privacy-frame" frameborder="0"
src="http://www.cnn.com/partners/mobile/v2/privacy.policy/"
style="width: 100%; background-color:#fff">
</iframe>
When i try to browse the page http://mobile-demo.turner.com/election/tos.html in iphone the internal links doesn't work.
But if i try to browse the page with src URL(http://www.cnn.com/partners/mobile/v2/privacy.policy/) it works.
Is this some issue with iFrame on iphone? Same code does work on Android browser or desktop browser.

My scrolling is not working in samsung android Mobile but works fine in all browsers and devices?

I am working on an application in which i have div as shown below
HTML:
<div id="commentDiv">
CSS:
#commentDiv {height: 458px; overflow: auto;}
In this div, comments are being populated from service. but the scrolling of div does not work in android though its working fine in all browsers and other devices like iPhone and iPad.
can any body solve this problem please its urgent.
No you can't.
The Android browser does not support scrolling of elements other than body.
In other words: overflow: auto isn't supported.
This has been filed as a bug a few years ago and it still isn't fixed.
http://code.google.com/p/android/issues/detail?id=6864&q=scroll%20android%20inner&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
or
http://code.google.com/p/android/issues/detail?id=2118&q=scroll%20android%20inner&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
It works in alternative browsers, like Firefox mobile, though.

Categories