Force iFrame to be as mobile device - javascript

I want to use an iFrame to demo a mobile device.
the thing is that the site I want to demo is http://m.domin.com/ and available only on true mobile device.
Is there any way to force the iFrame to be fake mobile device?
Thanks, Mosh

Not quite sure I understand the question, or what you are trying to do here, so I'll try to answer as best I can.
Why are you creating a mobile specific site? With the state of HTML5 today, there is literally no need for creating a mobile specific site. To test simply open up Google Chrome, open up dev tools, and change your device to an number of mobile devices they let you test virtually.
Alternatively you can use user-agent-switcher if that's your thing. To do this in an iframe you would edit the user.agent for the iframe like so:
navigator.__defineGetter__('userAgent', function(){
return 'foo' // customized user agent
});
navigator.userAgent; // 'foo'
It's apparently pretty finicky in some browsers though according to this previous related answer.

Related

DPR not working on firefox/chrome inspector

My last question was closed for some reasons (Chrome Inspector not even 1% accurate to real mobile devices)
However as it seems the problem was related to the DPR. I will attach images to show my problem
Chrome/Firefox Inspector with DPR 2.0 for Iphone 6/7/8:
Real Iphone 6:
I can not simulate the DPR on any website on any browser on my pc or my friends pc. It will always scale like 1. Doesnt matter if I use DPR 1,2 or 3.
So my questions is how to successfully simulate DPR 2.0?
I guess the problem is DPR or is it something else?
First of all the bigger text was my bad, my iphone got bigger text set that was the reason why the text was different. However the core of this topic is still the same and the resolution is different to chrome inspector and real devices. However mostly because of the browser taskbars.
As it seems no browser related inspector solution is working. However even when some people said it is not possible to emulate real devices it´s actually possible and also by google itself with android studio:
https://developer.android.com/studio
You can use any android version and create any resolution you want. You can also test localhost from your host os inside of your emulated smartphone browser by using this instead of the default localhost/127.0.0.1:
10.0.2.2
You can also open inspector of your emulated device from your main os! By using:
chrome://inspect/#devices
And here is starting the real question. Why does this inspector window clone the correct device resolution from the emulated device? I mean it´s literally the default chrome inspector window again. Very confusing.
They even clone the menubar, even when it´s now showing, the resolution and everything else was cloned 1to1 compared to the android studio emulator.
However I guess it´s more realtime streaming than actually cloning.
That´s to the point it´s not possible..
Also maybe very nice to know that you can use the fullscreen API to dodge problems with those annoying browser taskbars which crash your ui and take space. You can use this code to enter fullscreen with user gesture:
<button id="goFS">Go fullscreen</button>
<script>
$("#goFS").on("click",function(){
// this works with scroll - do not use document.body.requestFullscreen();
const elem = document.documentElement;
if (elem.requestFullscreen) {elem.requestFullscreen()}
if(document.fullscreenElement){
console.log('fullscreen detected');
}
});
</script>
In fact it´s really sad that you have to download android developer software just to emulate real display solutions as web designer. I hope google will build in this technology in future inside of their chrome inspector.
Also I guess apple is providing the same software for their ios app development. So you should be able to emulate iphones their too. However as far as I read you must use a MAC machine for this.
Hope this will help anybody.

Is it possible to open a new URL in Safari from Chrome if the page is being viewed on an iOS device?

Let’s say I have a webpage and it has a button with an HREF attribute. I want the HREF of that button to be opened on Safari browser if the button is being clicked from an iOS device, even if the user is accessing the page on Google Chrome.
As of now, I only need to handle this situation for Chrome and not any generic browser. The way I see it, there are two parts to the problem:
Identifying the OS of the Client Machine: This I might be able to do easily.
Opening the Popup on Safari from Chrome: This is the tricky part I am not sure if it is possible.
I am looking for possibilities of accomplishing the second part.
Short Answer: no.
Long Answer: Some iOS apps have defined URL schemes that can be used to access the app directly from the browser. For example, twitter://timeline. But Safari for iOS does not have one.
You can detect the OS the user is using and if it Chrome then suggest the user to open it in Safari and also provide the link where to download it from. Or you can also suggest the user to make safari their default browser. ( Also provide a link on how to do that to them).

Launch chrome as an emulator using javascript

I have a website where editors write articles using a custom built CMS. Once done they generally test these articles on desktop, but not mobile. To fix this I was wondering if there is an easy way to launch chrome using html/javascript such that I can provide it a url and one of the device emulators? (Keep in mind these are non tech people, and would be easily confused if I asked them to emulate themselves). If thats not possible then launch chrome in a new tab with specific width and height (which matches a mobile device)? Also if possible I would prefer these new windows to be incognito so that I do not save cookies in their sessions. Is there any way to do this? Any ideas would be appreciated. Thanks for reading
Chrome Provides Device Emulator as shown in below screenshot. by pressing the f12 ( Developers tool ) you can find the option. by selecting that "Device Emulator" Icon. You can choose the device as shown in below screenshot and change the device Os and device type and resolution and Orientation.

'Firebug' for iPad

I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).
Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.
The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/
I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile
weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)

Javascript, Smartphone detection for videos?

If there's a better way I am all for it. But I wanna detect a smartphone user on my site.
Whether they be a webOS, Android, or iPhone OS phone. I have a flash video on my site, but when I detect a smartphone users I want it to be a HTML5 video on the site instead.
You could try using this js library: http://videojs.com/
Here is a link to a javascript fix that I used in a similar situation. It not so much detects devices such as smart phones, rather detects whether the user has is able to view flash or not, displaying flash content first and falling back with whatever you specify if flash is not installed.
http://www.featureblend.com/javascript-flash-detection-library.html
Really simple to use and it played nicely with jQuery when I used it.
-Paul

Categories