Web pages adaptive to different browsers and resolutions

Source: Internet
Author: User
Tags html page version window dreamweaver
Resolution | browser | web | Self-adapting to the internet for so long, once more than once to see the home page of some websites eye-catching "please use Internet Explorer 4.0 version of the browser at 800x600 resolution to browse this site" and other words. However, my 17-inch color display you can't always let me use 800x600 resolution bar. Besides, although all say Netscape 6.0 no 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 some research, the author has found a way to solve this problem. Don't believe it? Then let's look down.
First you need to create the following HTML files:
index.html--Web site home page, the browser to identify.
Change-ie.html and change-nc.html--a Web page that distinguishes resolution.
Index-ie.html and index-nc.html--respectively represent Web pages that support both browsers and are viewed at 800x600 resolution.
1024-ie.html and 1024-nc.html--respectively represent Web pages that support both browsers at 1024x768 resolution. All right, cut the crap, let's get started!

Browser Issues
We take advantage of the Dreamweaver "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 pop-up the dialog box. Select Go to URL in the dropdown 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 the alt URL, respectively. That is, when the Web page detects that the browser is Netscape 4.0 or older, it automatically enters the change-nc.html, and if Internet Explorer version 4.0 is automatically entered into the change-ie.html. This enables the Web page to enter different pages according to the function of different browsers.
If an empty page flashes in front of a visiting friend, though it is a short time, it seems that there is something missing. This is just like when you install the software without a progress bar. So also to reflect the corresponding information on the page. Then add the following code between < body> and </body>! (in code//...) Is the comment text for the code, below)
< script language=″javascript″>
The name of the Var nav=navigator.appname//Browser
Version of the Var ver=navigator.appversion//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>″); Sets 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 Problem
Resolving resolution problems do not have this feature in Dreamweaver, we can only manually join a section of JavaScript code. First, add the following code to 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 the < 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 page conversion, please wait ... ″);
-->
</script>
Finally, in the same way, add the following code between < body> and </body> to display the work information for the Web page:
OK, all work done, try the effect, feel good?

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.