We Keep Coding

Force iFrame to be as mobile device

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.

How to add js and css only smartphones?

I wonder how to add css and javascript code only when the site is accessed via smartphones.
Currently I'm using media queries, but it does not solve the problems, because currently some smartphones already have higher resolutions than even some tablets and desktops.

You can use feature detection via. Modernizr to check for touch events.
Alternatively you can use user-agents - check out http://detectmobilebrowsers.com/
The best bet however is to design your website using fluid grid website design so your site adapts well to mobile, tablet and laptop/desktops.

If you are trying to detect high-resolution screens (which doesn't just mean smartphones!), use the device-pixel-ratio media queries: http://css-tricks.com/snippets/css/retina-display-media-query/
What about smartphones are you actually trying to detect?

If possible, try checking the User-Agent HTTP header on the server side, and dynamically include the necessary css and js files.

You can check the browser's user-agent to see if the user is connecting from a smartphone.
Check out this relevant post

How to detect chrome and safari browser (webkit)

I am trying to detect the chrome and safari browser using jquery or javascript.
I thought we are not supposed to use jQuery.browser. Are there any suggestions here? Thanks a lot!

If you dont want to use $.browser, take a look at case 1, otherwise maybe case 2 and 3 can help you just to get informed because it is not recommended to use $.browser (the user agent can be spoofed using this). An alternative can be using jQuery.support that will detect feature support and not agent info.
But...
If you insist on getting browser type (just Chrome or Safari) but not using $.browser, case 1 is what you looking for...
This fits your requirement:
Case 1: (No jQuery and no $.browser, just javascript)
Live Demo: http://jsfiddle.net/oscarj24/DJ349/
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isChrome) alert("You are using Chrome!");
if (isSafari) alert("You are using Safari!");
These cases I used in times before and worked well but they are not recommended...
Case 2: (Using jQuery and $.browser, this one is tricky)
Live Demo: http://jsfiddle.net/oscarj24/gNENk/
$(document).ready(function(){
/* Get browser */
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
/* Detect Chrome */
if($.browser.chrome){
/* Do something for Chrome at this point */
/* Finally, if it is Chrome then jQuery thinks it's
Safari so we have to tell it isn't */
$.browser.safari = false;
}
/* Detect Safari */
if($.browser.safari){
/* Do something for Safari */
}
});
Case 3: (Using jQuery and $.browser, "elegant" solution)
Live Demo: http://jsfiddle.net/oscarj24/uJuEU/
$.browser.chrome = $.browser.webkit && !!window.chrome;
$.browser.safari = $.browser.webkit && !window.chrome;
if ($.browser.chrome) alert("You are using Chrome!");
if ($.browser.safari) alert("You are using Safari!");

Most of the answers here are obsolete, there is no more jQuery.browser, and why would anyone even use jQuery or would sniff the User Agent is beyond me.
Instead of detecting a browser, you should rather detect a feature (whether it's supported or not).
The following is false in Mozilla Firefox, Microsoft Edge; it is true in Google Chrome.
"webkitLineBreak" in document.documentElement.style
Note this is not future-proof. A browser could implement the -webkit-line-break property at any time in the future, thus resulting in false detection.
Then you can just look at the document object in Chrome and pick anything with webkit prefix and check for that to be missing in other browsers.

Instead of detecting a browser, you should rather detect a feature (whether it's supported or not). This is what Modernizr does.
Of course there are cases where you still need to check the browser because you need to work around an issue and not to detect a feature. Specific WebKit check which does not use jQuery $.browser:
var isWebKit = !!window.webkitURL;
As some of the comments suggested the above approach doesn't work for older Safari versions. Updating with another approach suggested in comments and by another answer:
var isWebKit = 'WebkitAppearance' in document.documentElement.style;

There is still quirks and inconsistencies in 2019.
For example with scaled SVG and pointer events, between browsers.
None of the answer of this topic are working any more. (maybe those with jQuery)
Here is an alternative, by testing with JavaScript if a CSS rule is supported, via the native CSS support api. Might evolve, to be adapted!
Note that it's possible to pass many CSS rules separated by a semicolon, for the finest detection.
if (CSS.supports("( -webkit-box-reflect:unset )")){
console.log("WEBKIT BROWSER")
// More math...
} else {
console.log("ENJOY")
}
if (CSS.supports("( -moz-user-select:unset )")){
console.log("FIREFOX!!!")
}
Beware to not use it in loops, for performance it's better to populate a constant on load:
const ff = CSS.supports("( -moz-user-select:unset )")
if (ff){ //... }
Using CSS only, the above would be:
#supports (-webkit-box-reflect:unset) {
div {
background: red
}
}
#supports (-moz-user-select:unset) {
div {
background: green
}
}
<div>
Hello world!!
</div>
List of possible -webkit- only css rules.
List of possible -moz- only rules.
Can I use css support?

/WebKit/.test(navigator.userAgent) — that's it.

I am trying to detect the chrome and safari browser using jquery or javascript.
Use jQuery.browser
I thought we are not supposed to use jQuery.browser.
That's because detecting browsers is a bad idea. It is still the best way to detect the browser (when jQuery is involved) if you really intend to do that.

you can use this minified jQuery snippet to detect if your user is viewing using a mobile device. If you need to test for a specific device I’ve included a collection of JavaScript snippets below which can be used to detect various mobile handheld devices such as iPad, iPhone, iPod, iDevice, Andriod, Blackberry, WebOs and Windows Phone.
/**
* jQuery.browser.mobile (http://detectmobilebrowser.com/)
* jQuery.browser.mobile will be true if the browser is a mobile device
**/
(function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|e-|e/|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(-|2|g)|yas-|your|zeto|zte-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);
Example Usage:
if(jQuery.browser.mobile)
{
console.log(‘You are using a mobile device!’);
}
else
{
console.log(‘You are not using a mobile device!’);
}
Detect iPad
var isiPad = /ipad/i.test(navigator.userAgent.toLowerCase());
if (isiPad)
{
…
}
Detect iPhone
var isiPhone = /iphone/i.test(navigator.userAgent.toLowerCase());
if (isiPhone)
{
…
}
Detect iPod
var isiPod = /ipod/i.test(navigator.userAgent.toLowerCase());
if (isiPod)
{
…
}
Detect iDevice
var isiDevice = /ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase());
if (isiDevice)
{
…
}
Detect Andriod
var isAndroid = /android/i.test(navigator.userAgent.toLowerCase());
if (isAndroid)
{
…
}
Detect Blackberry
var isBlackBerry = /blackberry/i.test(navigator.userAgent.toLowerCase());
if (isBlackBerry)
{
…
}
Detect WebOs
var isWebOS = /webos/i.test(navigator.userAgent.toLowerCase());
if (isWebOS)
{
…
}
Detect Windows Phone
var isWindowsPhone = /windows phone/i.test(navigator.userAgent.toLowerCase());
if (isWindowsPhone)
{
…
}

Many answers here. Here is my first consideration.
Without JavaScript, including the possibility Javascript is initially disabled by the user in his browser for security purposes, to be white listed by the user if the user trusts the site, DOM will not be usable because Javascript is off.
Programmatically, you are left with a backend server-side or frontend client-side consideration.
With the backend, you can use common denominator HTTP "User-Agent" request header and/or any possible proprietary HTTP request header issued by the browser to output browser specific HTML stuff.
With the client site, you may want to enforce Javascript to allow you to use DOM. If so, then you probably will want to first use the following in your HTML page:
<noscript>This site requires Javascript. Please turn on Javascript.</noscript>
While we are heading to a day with every web coder will be dependent on Javascript in some way (or not), today, to presume every user has javascript enabled would be design and product development QA mistake.
I've seen far too may sites who end up with a blank page or the site breaks down because it presumed every user has javascript enabled. No. For security purposes, they may have Javascript initially off and some browsers, like Chrome, will allow the user to white list the web site on a domain by domain basis. Edge is the only browser I am aware of where Microsoft made the decision to completely disable the user's ability to turn off Javascript. Edge doesn't offer a white listing concept hence it is one reason I don't personally use Edge.
Using the tag is a simple way to inform the user your site won't work without Javascript. Once the user turns it on and refreshes/reload the page, DOM is now available to use the techniques cited by the thread replies to detect chrome vs safari.
Ironically, I got here because I was updating by platform and google the same basic question; chrome vs sarafi. I didn't know Chrome creates a DOM object named "chrome" which is really all you need to detect "chrome" vs everything else.
var isChrome = typeof(chrome) === "object";
If true, you got Chrome, if false, you got some other browser.
Check to see if Safari create its own DOM object as well, if so, get the object name and do the same thing, for example:
var isSafari = (typeof(safari) === "object");
Hope these tips help.

jQuery provides that:
if ($.browser.webkit){
...
}
Further reading at http://api.jquery.com/jQuery.browser/
Update
As noted in other answers/comments, it's always better to check for feature support than agent info. jQuery also provides an object for that: jQuery.support. Check the documentation to see the detailed list features to check for.

Handle iPhone Events (like slide-left) in Mobile Web Site

Does the iPhone browser have special events that I can hook into with Javascript? For instance, if the users slides to the left, I would like to perform a certain action. If there are events like this available, it would be nice to see a reference for all of them. ideally, there will someday be a standard for all touch-screen mobile browsers.

You can access multi-touch events and gestures, but there is a fair amount of under-the-hood plumbing you'll likely have to handle yourself. Here is Apple's guide:
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
As an example of what can be done with a MobileSafari web app, check out this article on Apple's in-house "PastryKit":
https://daringfireball.net/2009/12/pastrykit
Particularly, you can use Safari on Windows or Mac (if you enable the developer menu in the preferences and set the useragent to MobileSafari 3.x) and check out the way it works.
Another UI library to look at is jQTouch:
http://www.jqtouch.com/

jQTouch really does the thing.
http://jqtouch.com
http://code.google.com/p/jqtouch/wiki/CallbackEvents

Do you really mean "when the device orientation changes", perhaps? If so, you may want to bind to the onorientationchange event.
There's a useful reference of all on* events at Apple's Safari Reference Library.

Perhaps the onscroll, ontouchstart, ontouchmove, or similiar events are what you're looking for. All listed on the Safari HTML Reference page.

What are the quickest and easiest ways to ensure existing web pages display well on mobile platforms?

The pages in question contain a lot of javascript and CSS. How well are these supported by mobile platforms generally?
Is there a browser emulator (or equivalent tool) to assist testing?

Opera has an option to view pages as through a mobile device. I've found it useful in the past.

I can tell you that Apple's Mobile Safari on the iPhone renders Stack Overflow perfectly, which I find rather amazing.
This is a site for programmers, not average users, so we accepted a lot of JavaScript dependencies.
I do wish more mobile devices had browsers as powerful as Mobile Safari. I hear good things about Opera Mini as well.

One example:
The standard BlackBerry browser on my BlackBerry 8130 (Pearl) seems to ignore both CSS and JavaScript when loading my home page.
I also installed Opera Mobile on this device, which renders the CSS but not my jQuery hover effects. It does understand some jQuery - for example, I have a form validation that does a show() of error messages if validation fails. That works in Opera, although without the animation effect.
The safest thing to do for mobile browsers is to design pages that degrade gracefully without JS or CSS. It's up to you whether that's worth the effort or not.
In a few years, hopefully the only rendering differences will be the screen size limits of the phones.

You can install Opera Mini on an emulator like the Java WTK and test mobile rendering on a PC. One drawback is that Opera Mini still works through a proxy, so debugging local files/sites won't work - you have to upload your site to a world-accessible server.
Just google it.

It depends entirely on the phone. If you want to support every single device out there, don't even bother with CSS or JavaScript since neither will work (or will do something completely non-standard) on 99% of devices. If you are only targeting high-end devices, like the iPhone or the latest Series 60 Nokias, you should be able to get away with limited JS and CSS.
Some browser emulators that I know of:
Openwave.
Nokia tools
There are many more manufacturers that simply do not have any tools at all (I dare you to try and find a developer site for LG) so you need to get access to the physical handsets if you want to be sure the site appears as it should.
DeviceAnywhere is a superb tool if you have the cash. It was extremely laggy the last time I used it about a year and a half ago. Plus it is pure Java so is a dog on any machine. But it is arguably the single best mobile development tool available and, believe you me, I've tried a lot.

BlackBerry devices with OS 4.5 or older will not handle Javascript or CSS very well, if at all. Devices with OS 4.6 and higher (Bold, Pearl Flip, Storm, etc..) come with a new rendering engine which has much better support for Javascript, DOM, and CSS. It's not perfect but it should render most pages quite well. You can download the BlackBerry simulator for these devices from their developer website and try it out. Since it runs the same code as on the actual device it's an excellent representation of what you can expect to see on-device.