如何让代码更易于维护
通过智能手机或平板手机访问您的网站是否提供优化的移动体验？ 如果不是这样的话，这不是世界末日，因为现代浏览器通过捏到缩放和自动字体大小调整等创新使体验更加令人愉悦。 如果您没有时间或金钱来使您的网站移动友好，那么今天您可以做以下十件事，使您的网站更适合移动用户使用。
如果您的网站使用的输入字段，要求用户的姓名或地址，然后关闭autocorrect并打开autocapitalize 。
What's your name: <input type=text size=20 autocorrect=off autocapitalize=words>
如果您不这样做，那么如果在词典中找不到电话，电话会将其名称（例如“ Erwan”）更改为其他名称（例如“ Erevan”）。 将自动大写字母设置为words将使他们不必为每个连续的名称切换大写锁定键（例如，“ Ken Burns”变为“ Ken Burns”）。
想一想您的用户将节省的所有麻烦。
当您使用它时，如果您的网站要求输入用户的电子邮件，则使用email特定的输入字段，以便向用户显示@键，而无需切换到数字/符号键盘。
What's your email: <input type=email size=20>
2.设置移动友好的首选宽度
将您的网站加载到桌面浏览器中，然后将窗口调整为最窄的宽度，同时保持网站的可读性。 这是您的最小观看尺寸。 现在，通过将该meta标签添加到页面的head ，获取该窗口的大小并将其设置为网站的首选视口宽度。
<meta name=viewport content='width=700'>
下次在移动设备上查看您的网站时，它将自动以该大小显示您的网站，同时删除了网站左右两侧的所有多余空间，因此用户无需缩小或放大在他们的第一次访问。
这个网站右边有很多浪费的空间。
该网站正好放大。
如果您的网站已经基于流量百分比建立并且可以在所有屏幕尺寸下使用，那么您的工作将更加容易。 只需尝试使移动设备上的视图令人愉悦且可读的宽度，然后在meta标签中使用该宽度即可。
3.将图像宽度设置为100％
现在，您的网站已设置为首选宽度，某些图像自然会变得太宽。 以前从未发生过这种情况，因为桌面屏幕相当宽，并且大多数图像都可以毫无问题地放在屏幕内。
为了解决这个问题，请为您的图片提供最大100％的宽度，以便在移动设备太大时自动调整它们的大小。 将此添加到您网站CSS样式表。
img {
max-width: 100%
}
如果您的图片设置为背景图片，而不是作为img标签，简单地设置background-size CSS属性contain 。 当屏幕太小时，这将导致背景图像调整大小。
.header {
background: url(header.png) 50% no-repeat;
background-size: contain
}
请稍等，缩小后图像会不会失去清晰度？ 如果您使用的是现代移动设备，则不会。 当用户放大图片时，浏览器将在放大时恢复清晰度。但是，请确保您的网站未在meta标签中设置user-scalable=no属性。 如果是这样，则用户将无法放大和缩小。
<!-- DON'T DO THIS! -->
<meta name=viewport content='user-scalable=no'>
为图像提供max-width ，在input字段上执行类似的操作。 只需将其添加到您网站CSS样式表即可。
input, textarea {
max-width:100%
}
在设置了首选宽度的移动设备上浏览网站时， input字段不会超出屏幕边缘。
第一次单击后，您的网站是否禁用表单submit按钮以防止多次提交？ 如果是这样，请不要这样做（除非绝对必要）！
与台式计算机不同，移动设备经常遇到网络中断的情况。 如果禁用该按钮，则用户无法再次单击以重新提交。 我不仅在谈论由于信号不良或信号塔切换造成的网络中断。 如果用户在提交表单时收到电话，则移动浏览器将关闭以显示呼叫者屏幕，并且当重新打开浏览器时，该浏览器可能无法从该中断中恢复。
如果必须禁用submit按钮，请仅将其禁用几秒钟。
6.对长字符串使用word-wrap
有时有必要显示长字符串，例如参考代码，银行帐号甚至URL。 如果您的网站太狭窄而无法在移动设备上显示整个数字，则它可能会超出屏幕边缘。
要解决此问题，只需使用word-wrap样式包装任何长字符串即可。 现在，文本到达边缘时将中断到下一行，使用户无需滚动即可查看整个文本。
Your passcode is:
<span style='word-wrap:break-word'>435143a1b5fc8bb70a3aa9b10f6673a8</span>
向用户显示一长串数字时，一种常见的技术是将它们分成5个字母组，并在它们之间留有空格（例如43514 3a1b5），以便用户在键入时可以一次记住五个数字在另一个应用程序中。 对于精明的用户，他们只需复制并粘贴整个字符串，然后删除空格。
在台式计算机上，删除琐碎的空格。 但是在移动设备上，这要花费很多时间。 为了解决这个问题，不要在五个字母组之间显示空格，只需将五个字母组包装在元素之间并在其中添加一些填充即可。
<style>
.split m {
padding: 0em 0.5em
}
</style>
Your passcode is:
<span class='split'><m>43514</m><m>3a1b5</m><m>fc8bb</m></span>
现在，这些组之间将有一个空格，但是在复制和粘贴它们时，这些空格将不会出现。 这为您的用户节省了时间。
当所有其他方法都失败时，您无需调整网站并缩小大小，以便它们在移动设备上看起来更好，而不必在台式计算机上看起来太小。 这就是媒体查询的来源。
您可以创建自定义样式规则，这些规则仅在移动设备上查看（或在小的浏览器窗口中查看）时生效，而在桌面浏览器上不生效。 只需在媒体查询中添加目标样式，如下所示。
<style>
/* regular css */
.tabs {
padding: 10px 2em
}
@media screen and (max-width: 500px) {
/* applies only if the screen is narrower than 500px */
.tabs {
padding: 3px 1em
}
}
</style>
现在，您可以进行一些小的调整，以使您的网站在台式机和移动设备上看起来都不错。
9.避免fixed位置
如果您的网站具有固定的标头或侧边栏，并且CSS position属性设置为fixed ，请注意，当用户放大您的网站时，标头也将放大并可能使整个屏幕模糊。
最简单的解决方案是在移动设备上查看网站时禁用固定位置。 您可以使用上一个技巧中的媒体查询方法来执行此操作。
<style>
/* regular css */
#header {
position: fixed
}
@media screen and (max-width: 500px) {
/* applies only if the screen is narrower than 500px */
#header {
position: static
}
}
</style>
10.使用标准字体
使用自定义字体可使您的网站具有专业设计的外观，但是用户需要下载大字体文件才能查看您的网站。 在移动设备上，下载可能需要花费几秒钟的时间，在此过程中，会向用户显示文本应位于的空白区域。
如果您正在使用Google Font Loader加载字体，则可以选择先显示默认字体的文本，然后在下载字体后以新字体重新呈现页面。 为此，在引用自定义字体的任何地方都需要编写两组CSS规则。 一组使用默认字体的规则，一个在下载字体后变为活动的规则。 这样，用户可以同时获得两全其美。 他们可以在等待下载时阅读文本，并且可以在下载后享受您的自定义字体。
<script src='//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js'></script>
<script>
WebFont.load({
google: {
families: ['Open Sans']
}
});
</script>
<style type='text/css'>
.header {
font-family: Arial
}
.wf-opensans-n4-active .header {
font-family: 'Open Sans'
}
</style>
注意.wf-opensans-n4-active类选择器，它在字体加载完成后由字体加载器动态添加到网站。
结论
本文介绍的十件事仅是您可以对现有网站进行的微小更改。 它们意味着用户在尝试使用小屏幕和键盘与您的网站进行交互时，无需沮丧地拔头发。 我鼓励您今天在您的网站上实施它们！
翻译自: https://www.sitepoint.com/10-ways-make-website-mobile-friendly/
如何让代码更易于维护
转播
