CODEWITHSUNDEEP
coding-stylebrowser
user244333
user244333

Reputation:

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?

EDIT: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.

Upvotes: 2

Views: 2806

Answers (4)

Tim Hettler
Tim Hettler

Reputation: 1256

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

Upvotes: 0

ndim
ndim

Reputation: 37827

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.

Upvotes: 0

tloflin
tloflin

Reputation: 4050

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.

Upvotes: 1

Erik Persson
Erik Persson

Reputation: 223

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

Upvotes: 1

Related Questions