Home > Developer > Web Develop
JS Judging Browser type
<script type= "Text/javascript" >
<!--
function Getos ()
{
var osobject = "";
if (Isie = navigator.userAgent.indexOf ("MSIE")!=-1) {
return "MSIE";
}
if (Isfirefox=navigator.useragent.indexof ("Firefox")!=-1) {
return "Firefox";
}
if (Ischrome=navigator.useragent.indexof ("Chrome")!=-1) {
return "Chrome";
}
if (Issafari=navigator.useragent.indexof ("Safari")!=-1) {
return "Safari";
}
if (Isopera=navigator.useragent.indexof ("Opera")!=-1) {
return "Opera";
}
}
Alert ("Type-a" +getos ());
-
</script>
How Web pages are displayed in full screen on computers with different resolutions
The first method: Make a Web page to solve the problem (a bit longer)
If only because the viewer changed the browser settings, or because the browser is incompatible, so that their carefully crafted pages become "beyond recognition", how frustrating! Below we use the Web Enthusiast's Common tool Dreamweaver (hereinafter referred to as DW) as an example, listed several Web page making beginners more common page layout problems and solutions, hope to be helpful to the beginners.
First, eliminate any zoom browser window on the impact of the Web page
A hard to do out of the webpage, in full screen state to browse everything normal. But after changing the size of the browser window, the page becomes "unsightly", which is a very noteworthy issue.
The root of the problem is also from the layout of the Web page, in the DW, the location of the Web page content is generally achieved through the table, the problem of solving the table is the most successful.
It should be noted that two different types are available on the high-width setting selection of the table Properties panel in the DW: percent and pixel values. The use of percentages will produce the problem mentioned earlier. The percentage mentioned here is that the height or width of the table is set to the high or wide percentage of the upper mark, such as the width of a table cell is 600, in which another table is embedded, the table width is 50% of the table cell, the table width is 300, and so on, If a table is not embedded in another table cell, its percentage is relative to the width of the window at the time. In IE, when you change the size of the home window, the contents of the table are misplaced and distorted, because the percentage of the table changes to the corresponding percent width as the window size.
Naturally, the solution to this problem is to set the table width to a fixed width (that is, the pixel value). In addition, if the outer table is set to a fixed width, the inner table can also use the percent setting appropriately. After this principle is clear, if a similar problem arises, everyone will know how to solve it.
Second, let the Web page center
Speaking of the window size will follow the path to the resolution of the problem, the 800x600 resolution of the Web page in the 1024x768 resolution of the machine open, the entire Web page will run to the left; 1024x768 resolution of the Web at 800x600 resolution of the machine sometimes become "unsightly." Do you make one of the two resolutions? It is time-consuming and laborious to do. What do we do?
Now most netizens are still using 800*600 resolution, so we can generally use this resolution as the main, want to let the Web page in the 1024x768 Center, as long as the page in the original code <body> after a sentence <center>,</body > before adding a sentence </center> will be OK. But there are a few questions. This is to note that the first one is the question of the percentage mentioned above, the table, cell width unit is best to use pixel units, rather than the percentage. such as width=770. If your table width is set to a percentage, when you use pixels larger than 800x600, the page will widen, and the page may deform. Add leftmargin=0 to <body>, i.e. <body leftmargin=0> in this case, the width of the table with 800x600 support is 780 pixels without scroll bars. It is also important to note that the layers in the DW cannot be used for positioning.
<body topmargin=0 leftmargin=0>
<center>
<table cellspacing cellpadding width=760><tr><td></td></tr></table>
</center>
</body>
Define fixed-size text
As we all know, in the function of IE browser, there is a function that can set the font size of the window content freely, so that the Web page presented in front of them will be different sometimes because of different visitors ' setting habits. For example, you might have used the design of the 2nd font, the result of the user to the browser additional settings, the larger, then your Web page may become "unsightly." Although it's not your fault, the customer is God.
This is not the case if you are using CSS style sheet technology in your Web page. Use the shortcut key "Shift+f11" to open the style sheet "CSS style" editor, click the right mouse button in the window to execute the "new CSS style ..." command to create a new style sheet, and then select the "type" option in the given list. Define text attribute parameters (General text Size selection 12px more appropriate). When you are finished selecting the text in the page Editing window, click the new style sheet name to see that the selected text has changed. The text font size that you try to define when previewing will also change depending on the size of the browser's selected font.
Four, to adapt the Web page to different browsers
Browser's landscape is now two points of the world, one point is ie, another point is Netscape, in the domestic IE has an absolute share, in this case we design the page as long as compatible with it, but Netscape in foreign or there are many people use, after all, it is the browser of the elder.
Although there is no way to make all browsers compatible with the site, but as long as the attention of the following points, made out of the Web page in each browser can achieve a better display effect:
Do not mix layers and table layouts, if a parent-child relationship, such as a table in a layer, is not within the scope of this principle.
Inline CSS often causes problems in the Netscape Navigator, using chained or inline-style.
Sometimes it is necessary to insert a table or transparent picture in an empty layer to ensure the effect in Netscape Navigator.
For layers that have only a few pixel widths or heights, use a picture to implement them.
Avoid using the layout attributes that are not recommended by the organization and use CSS instead.
The second method: do two suitable for different resolutions of the page, one is 800x600, one is 1024x768, in 800x600 page to add a bit of code can be achieved jump:
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 () to the < body...>
Finally, in the same way, add the following code between < body> and </body> to display the work information of the Web page:
< script language=javascript>
<!--
var w=screen.width
var h=screen.height
document.write (the system has detected that your resolution is:);
document.write (〃< font size=3 color=red>〃);
document.write (W+〃X〃+H);
document.write (〃</font>〃);
document.write (you are entering the page conversion, please wait ...);
-
</script>
The problems and solutions of the page in different screen resolutions
(cases with 800*600 or lower resolution are not considered)
A problem
At different resolutions, the page layout has different degrees of difference, especially the form control on the page, the width of the default is fixed value "width:150px", when the resolution is high, the table blank appears too much, the page layout is very uncoordinated, especially on the widescreen display.
Ii. Solutions
Method 1. For different resolutions to do a separate style file, the page head with JS to determine the resolution after the dynamic loading of the defined style file. Style file naming format such as: forms[_ screen width].css, the style file only need to redefine the width of the text box and drop-down box.
Add the JS code to the included header file Headr.inc:
if (Screen.width > 1024) {
document.write (' <link rel= ' stylesheet "type=" Text/css "href=" ${path}/nrmus/etc/css/forms_ ' + screen.width + '. css " > ');
}
Forms_1280.css File Contents:
/* When the resolution width is 1280, the width attribute (width) of the text box and drop-down box is defined separately
* Reference calculation method is: (resolution width-174)/4 * 0.7
* The left menu bar width is 174px; the right page table is 4 columns; the width of the control is 70% of the cell
* (1280-174)/4*0.7 = 193
*/
Input.text
{
Background: #FFFFFF;
border:1px solid #B5B8C8;
PADDING:3PX 3px;
height:22px;
line-height:18px;
Vertical-align:middle;
padding-bottom:0pt;
padding-top:2px;
width:193px;
Color: #333;
}
select.select{
width:193px;
}
Pros: Implementation is simple, code is small, and finer-grained page controls can be made for different resolutions.
Cons: no obvious drawbacks.
Method 2 Sets the width of the entire page to a fixed value and makes it centered.
Pros: The display differences at different resolutions can be eliminated to a large extent.
Disadvantage: When the resolution width is greater than this fixed value, white space appears on both sides of the page.
Method 3 Use JS to determine the resolution, modify the body's Zoom property (ie feature), you can achieve the entire page to zoom, similar to IE8 or other browser-provided zoom function.
Advantages: Simple implementation, the page can be scaled.
Disadvantage: Scaling is the width and height of the equal ratio of scaling, high-resolution fonts, pictures will look smaller, the problem is not completely solved.
Three summary
Recommended Method 1. The change of page layout and the width of resolution are closely related, and the height of the relationship is not very large, commonly used resolution width of a few, do a few simple CSS files.
Closed PackageI. Adding META tags to the head of HTML
Add a meta tag to the head of the HTML header, which tells the browser that the page width is equal to the screen width of the device and does not scale, as follows:
<meta name= "viewport" content= "width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0 ">A simple analysis of the meaning of this line of code: Width=device-width indicates that the width of the Web page is equal to the width of the device screen, initial-scale=1.0 indicates that the setting page initial scaling is 1,user-scalable=no to prohibit the user from scaling, The maximum-scale=1.0 and minimum-scale=1.0 represent the largest and smallest page scaling ratios. Because the browser does not have the same degree of parsing as meta tags, we want to be as compatible as possible with all browsers.
Two. Percent layoutIn the page layout, the relative width and the absolute width of the combination of layout, will be more conducive to the maintainability of the Web page.
In the IPhone5, IPhone6 and iphone 6 Plus layouts, you can see that the font size and spacing are different, even if the same set of page codes are displayed, as the screen width of the device varies. In the red box, the percentage layout is used, and the maintainability of the Web page is better.
Three. Implementation of responsive pagesAt present, there are two ways to implement the response, one is to use Media query , the other is the grid layout under Bootstrap, introduce the bootstrap when introducing the grid layout, Here's how to use media queries to implement responsive layouts.
Media queries, that is @media queries, media queries can set different styles for different screen sizes , especially if you need to design responsive pages, @media is very useful. When you reset the browser size, the page will also re-render the page based on the browser's width and height. Because the style is set, the code that is associated with the media query is placed at the bottom of the CSS file.
In order to understand the usage of the response more clearly, I have listed two cases below. The first case is relatively simple, which realizes the effect of changing the body background color in different page widths. The second case is an example of a specific project, more user-friendly
Example 1:
If the page width is less than 300 pixels, the background color of the modified body is red:
@media screen and (max-width:300px) { body { background-color:red; }}If the page width is greater than 300 pixels and less than 600 pixels, the background color of the modified body is green:
@media screen and (min-width:300px) and (max-width:600px) { body { background-color:green; }}If the page width is greater than 600 pixels, the background color of the modified body is blue:
@media screen and (min-width:600px) { body { background-color:blue; }}
Code Explanation:
Screen means computer screens, tablets, smartphones, etc., Min-width and max-width are used to define the minimum and maximum width of the page in the device.
Example 2: Visual China Home (http://www.shijue.me/) responsive implementation
First look at how the page looks in different windows:
The page styles are as follows when the window width is greater than 1200px:
The page style is as follows when the window width is greater than 900px and less than 1200px:
When the page width is less than 900px, the page style is as follows:
Next, let's look at the specific code implementation:
The HTML code is as follows: note There are several pictures that write several col
<div class= "Group_wrap" > <div class= "group" > <div class= "col" > <div class= "Img_ Logo "> </div> </div> <div class=" col "> < Div class= "Img_logo" > </div> </div> </div> </div>CSS code as follows, the default is the page width is greater than 1200px time page:
. group_wrap{ width:100%; Overflow:hidden;}. group{ width:1200px; margin:0 Auto; Overflow:hidden;}. col{ width:280px; margin:10px; Float:left;}. img_logo{ padding:10px; Background:white;}Implement the response code as follows, placed at the bottom of the CSS file:
/* When the width of the page is between 900px ~ 1200px */@media screen and (min-width:900px) and (max-width:1200px) { . group{ Width: 900px; }} /* When the width of the page is between 600px ~ 900px */@media screen and (min-width:600px) and (max-width:900px) { . group{ width:600px ; }}Summary: In fact, the implementation of the responsive page is very simple, as long as serious learning, often practice, you can master!
Four. Pages using relative fonts
We often use absolute pixel (px) to lay out the layout of our usual Web page layout, which is not suitable for the implementation of our adaptive Web page, so we now introduce two common absolute units, EM and REM. REM (font size of the root element) refers to the unit of font size relative to the root element. Simply put, it is a relative unit. See REM Everyone will think of EM units, EM (font size of the element) is the unit relative to the font size of the parent element. They are very similar, except that a calculated rule is dependent on the root element one is dependent on the parent element calculation.
1. Relative Length unit emCharacteristics of EM: The value of ①em is not fixed; ②em always inherits the font size of the parent element.
Nonsense not much to say, directly on the code:
2. Relative length unit REMHTML code:
<div class= "One" > <span> First level </span> <div class= "Two" > <span> Second Level </ span> <div class= "three" > <span> Third level </span> </div> </div></ Div>CSS code:
body{ font-size:20px;}. one{ font-size:1.5em;}. two{ font-size:0.5em;}. three{ Font-size:2em;}Results:
. One ---> 30px 1.5 * = 30px
. ---> 15px 0.5 * = 15px
. Three---> 30px 2 * 30px
Code Analysis:
EM inherits the font size of the parent element, and for most browsers, if the body font size is not given, the default is 16px, so for a div named one, its father is body, so 1em = 16px; In this case, the body font size is 20px, so for. One, 1em = 20px, then 1.5em = 30px. So one's font-size is 30px.
For a DIV whose class name is two, its father is one, because EM inherits the font size of the parent element, so 1em = 30px, then 0.5em = 15px, so the font-size is 15px.
For a div with class name called Three, its father is two, because EM inherits the font size of the parent element, so 1em = 30px, then 0.5em = 15px, so the font-size is 15px.
REM is a new relative unit of CSS3 (root em, root em), and this unit has aroused widespread concern. What is the difference between this unit and EM? The difference is that when you use REM to set the font size for an element, it is still relative size, but relative to the HTML root element. This unit is a combination of relative size and absolute size of the advantages in one, through it can only modify the root elements in proportion to adjust all font size, but also to avoid the size of the font-layer composite chain reaction.
Let's take a look at the following example:
HTML code:
<div class= "One" > <span> First level </span> <div class= "Two" > <span> Second Level </ span> <div class= "three" > <span> Third level </span> </div> </div></ Div>CSS code:
html{ font-size:20px;}. one{ Font-size:1.5rem;}. two{ Font-size:0.5rem;}. three{ Font-size:2rem;}Results:
. One ---> 30px 1.5 * = 30px
. ---> 10px 0.5 * = 10px
. Three---> 40px 2 * = 40pxCode Analysis:
REM is the new unit introduced in CSS3, the value of REM is always relative to the font-size size set in the root element html, if not set, the default is font-size in most browsers is 16px, then 1rem = 16px;
So for a div named one, the class name is 1.5rem = 1.5 * = 30px. Other similar, no longer one by one repeat.
A summary of EM and REM:
"em" is relative to its parent element to set the font size, so there is a problem, any element setting, it may be necessary to know the size of his parent element, when we use multiple times, will bring unpredictable error risk. REM is relatively easy to use, and as far as my company is concerned, there is a lot of rem in real-world project development. It is estimated that in the near future, domestic designers will fall in love with rem like foreign designers.
Five. js dynamic set REM to achieve mobile font adaptiveAs a matter of fact, you may have understood the use of REM, but have not yet learned how to use REM to achieve adaptive mobility. In the final analysis, the REM adaptive Mobile is the original feature of its own, it can always according to the root element of the font size to change its own values. The screen size of various common mobile phones is as follows:
We want to achieve mobile phone-side adaptation, that is, you can make the page element font, spacing, width and high attribute values can vary with the size of the mobile phone screen changes, next we see how to use JS to dynamically set up REM and mobile-based adaptive, JS code is as follows:
Gets the HTML element var html = document.getelementsbytagname (' html ') [0]; Width of screen (compatible handling) var w = Document.documentElement.clientWidth | | document.body.clientwidth;//750 This number is based on the actual size of your design diagram, so the value is specific to the size of the design html.style.fontSize = w/750 + "px";The above code realizes using JS to get the width of the device screen, and dynamically change the Font-siz property of the root element html according to the width of the screen . For example, for iphone6, the screen size is 750, then in IPhone6 the HTML font-size is 1px, so 1rem = 1px; for iPhone5, the screen size is 640, Then under IPhone5 the HTML font-size is 640/750 = 0.85333px, so 1rem = 0.85333px. That way, even if we set the same size and unit for an element, it will show a different size under different devices. For example Div{width:100rem}, under IPhone6 its width will be equal to 100px, and under iPhone5 it is equal to the width of * 0.85333 = 85.333px. So we can really achieve the mobile end of the adaptive, how, is not very simple!
JS Judging Browser type
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
