Web page adaptive to different browsers and resolutions [GO]

Source: Internet
Author: User
Tags dreamweaver

Internet so long, has more than once seen some sites on the homepage of the "Please use the Internet Explorer 4.0 version above the browser in 800x600 resolution browse this site" and other words. However, my 17-inch color display you can not always let me use 800x600 resolution bar. Besides, although all said Netscape 6.0 not IE 5.5 good, but I also want to taste fresh! Oh, it turns out your web page is so ugly in Netscape! No wonder ..... After a study, the author has found a way to solve this problem. Don't you believe it? Then go down and look at it!
There are several HTML files that need to be built first:
index.html--website home page, the browser to identify.
Change-ie.html and change-nc.html--to identify the resolution of the Web page.
Index-ie.html and index-nc.html--represent Web pages that support both browsers and are viewed at 800x600 resolution.
1024-ie.html and 1024-nc.html--represent Web pages that support two browsers at 1024x768 resolution. All right, don't say a word, let's get started!

Browser Issues
We take advantage of Dreamweaver's "Check Browser" feature. First press F8 to open the Behaviors panel, click the "+" button on the panel, select "Check Browser" in the pop-up menu, and the dialog box pops up. Select "Go to URL" in the drop-down box after Netscape Navigator and select "Go to Alt url" in the drop-down box after Internet Explorer. Then select Change-nc.html and change-ie.html by clicking the browser button after the URL and alt URL respectively. That is, when the Web page detects that the browser is Netscape 4.0 or higher, it automatically enters change-nc.html, and if Internet Explorer version 4.0 or above automatically enters change-ie.html. This enables the Web page to enter different pages according to the different browser functions.
If the empty page in front of the visiting friends flashed, although the time is very short, but always seem to feel a little something. This is just like when you install the software without a progress bar. Therefore, the corresponding information should be reflected on the page. Then add the following code between < body> and </body>! (in code//...) Is the comment text of the code, the same as below)
< script language=″javascript″>
var nav=navigator.appname//Browser name
var ver=navigator.appversion//version of the browser
document.write (″ has detected that your browser is: ″);
document.write (″< font size=3 color=red>″); Set the font size and color of the browser's name
document.write (NAV);
document.write (″</font>″);
document.write (″< font size=3 color=blue>″); Set the font size and color of the browser's version number
document.write (ver);
document.write (″</font>″);
document.write (″ is entering the page, please wait ... ″);
</script>

resolution Issues
Resolving resolution issues without this feature in Dreamweaver, we can only manually add a piece of JavaScript code. First add the following code in the < head> and < script language=javascript>
<!--
function Redirectpage () {
var Url800x600=″index-ie.html″; Defines two pages, where index-ex.html and 1024-ie.html are assumed to be in the same directory as change-ie.html
var Url1024x768=″1024-ie.html″;
if ((screen.width==800) && (screen.height==600))//Add screen.width, screen.height values here to detect more resolutions
Window.location.href= url800x600;
else if ((screen.width==1024) && (screen.height==768))
window.location.href=url1024x768;
else window.location.href=url800x600;
}
-
</script>
Then add Onload=″redirectpage () ″ in < body...>
< script language=javascript>
<!--
var w=screen.width
var h=screen.height
document.write (″ system has detected that your resolution is: ″);
document.write (″< font size=3 color=red>″);
document.write (W+″X″+H);
document.write (″</font>″);
document.write (″ is entering the page conversion, please wait ... ″);
-
</script>
Finally, in the same way, add the following code between < body> and </body> to display the work information of the Web page:
OK, all the work done, try the effect, feel good?

Web page adaptive to different browsers and resolutions [GO]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.