How to make a webpage display differently in different browsers?

I want to display the contents of a web page in a different format in different browsers. How to go about implementing it?

ED开发者_Python百科IT:More Information

The motivation behind this is to display the content in different mobile devices. For example: iPhone uses Safari So if a safari browser is used I will adjust the content so that it fits the screen of the iPhone perfectly and I can change the font size etc

If some other browser is used then I will change the format appropriately.

Check the contents of the User Agent header that is sent with the HTTP request. Until you tell us more about what you're using to display the page I can't be any more specific, but you should compare the User Agent header to known browsers and then serve up different content based on that test.

<?php
    if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone')) {
        // is iPhone
    }
?>

In addition to reacting on different user-agent HTTP headers, you can also use some CSS tricks to differentiate at least between IE and non-IE browsers, and different IE versions. And of course there is still another method: Use some JavaScript code to show/hide specific parts of the page depending on the browser detected from that JavaScript code.

As a rule, though, I would avoid any browser specific stuff and write the pages in a way that renders well in the most important browsers, and reasonably gracefully degrades with the older and ancient browsers.

Let me also note that if you decide to user-agent switching after all, please do make sure you fall back to reasonable defaults. Nothing is more annoying than needing to masquerade my browser A as browser B just because some web site does not know about browser A or something similarly stupid.

Browse-sniffing is tricky to do because many user agents try to mimic others to get past programmer-induced restrictions. If you're specifically trying to make a mobile-friendly stylesheet, using the "media" attribute of the LINK tag is a good way to target specific devices. i.e.

<link rel="stylesheet" type="text/css" href="base.css" media="all"/>
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld"/>

The first stylesheet will be applied to all media types, while the second will only get applied to "mobile" devices.

If you're looking for a way to target only IE, check out Conditional Comments: http://www.quirksmode.org/css/condcom.html

Aaaand for a bit more information on controlling the viewport of the iPhone, check out this article from Apple: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html