Have Geek Brain

How do I render a webpage differently in different browsers?

I want to display the content of a webpage in a different format in different browsers. How can this be done?

EDIT: additional information

The motivation is to display content across different mobile devices. For example: iPhone uses Safari So if using the Safari browser, I will adjust the content to fit the iPhone screen perfectly, and I can change the font size, etc.

If using a different browser, I'll change the format accordingly.

+2


a source to share


4 answers


Check the content of the User Agent header sent with the HTTP request. Until you tell us more about what you are using to render the page, I cannot be more specific, but you should compare the User Agent header with known browsers and then serve other content based on this test.



+1


a source 


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


+1


a source


Besides reacting to different HTTP headers user-agent

, you can also use some CSS tricks to differentiate at least between IE and non-IE browsers and different versions of IE. And of course there is one more method: use JavaScript code to show / hide certain parts of the page depending on the browser detected with this JavaScript code.

As a general rule, I would avoid any browser specific material and write pages in such a way that they render well in the most important browsers and degrade reasonably gracefully with older and older browsers.

Let me also point out that if you do decide to switch to user-agent

after all, please make sure you go back to reasonable defaults. Nothing is more annoying than having to disguise my browser A as browser B just because some website doesn't know about browser A or something silly like that.

0


a source


Survey-sniffing is difficult to do because many user agents try to imitate others in order to overcome the limitations imposed by programmers. If you're specifically trying to create a mobile style sheet, 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 style sheet will apply to all types of media, while the second will only apply to "mobile" devices.

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

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

0


a source






More articles:


All Articles