前端网站制作时需要注意的注意事项

最近在做公司的网站，虽然是之前就有一个网站，但是由于这次整体更新改动比较大，所以几乎每个页面都重新改动。

在这次公司网站中，我遇到了这些需要注意的点：

1、需要注意不同浏览器的兼容性。

有些css只是针对某些浏览器，对另一些浏览器并不起作用，，所以为了客户在不同的浏览器观感舒适，应该多几个浏览器浏览你的网页。

客户用的比较多的浏览器有chrome、Firefox、Safari、IE7、IE8、IE9、IE11、搜狗、QQ、2345浏览器。每个浏览器都需要正常显示。但由于主要内核有Trident、Webkit、Gecko、Blink，所以着重用IE、Firefox、safri、Chrome来进行测试。

相关链接：WEB前端开发人员须知的常见浏览器兼容问题及解决技巧：

2、不同电脑屏幕大小的网页自适应。

不同的电脑，屏幕大小不同。所以尽量不使用固定的值，而采用百分比，因为当浏览器大小变化时，会产生错位等现象。

3、电脑和手机的网页

网上搜索，都是建议使用这个meta标签。然而我原本与手机浏览器差不多的页面大小在使用之后页面并没有自适应网页甚至突然变大。（网上也并没有这个问题，我也只能继续采用width：100%的笨办法慢慢调试。）

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes” />

4、安卓和ios的网页兼容。

安卓和ios的网页也有些许不同。

我目前发现的是：安卓浏览器在识别到页面高度不够时，会在下方添加空白。而ios的浏览器会在识别到页面高度不够手机屏幕时，将页面高度自适应为手机屏幕的高度，宽度拉宽。

这个不同可以采用以下代码进行识别，使用if语句进行操作。

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

alert('是否是Android：' + isAndroid);

alert('是否是iOS：' + isiOS);

 

ps:在手机浏览器（或者宽度只有几百px时）中，发现尽管所有宽度都设为100%，但右侧仍有空白（右侧无内容，仅空白）。

误打误撞，使用了以下代码成功了。

html {

width: fit-content;

}

 

这些注意事项，有些可能再别的项目之中不可用了，我要自己总结出一套css的兼容顺序写法。