针对智能手机优化您的网站

用智能手机和PC更改网站的显示

由于智能手机已经变得如此受欢迎,如何访问互联网正在发生变化。直到不久以前有很多更多的从PC访问,现在已经成为(2013秋季电流),PC和智能手机约各占一半的比例。

需要智能手机支持

当我看到用智能手机为PC制作的页面时,我感到很紧张。当该字符显示的状态下的站点,其中左,右宽度不适合小型或屏幕应该提供相应的智能手机,但站点的页面数量也超过100页,在大量的工作来解决它会变成。

智能手机和个人电脑,平板电脑和平板电脑,我想到了如何尽可能轻松地在每台设备上轻松显示。

针对智能网站进行了优化

当我在智能手机上看到一个PC站点时,我在许多网站上的感觉是显示器变得太小而且难以阅读这些字母。我认为这是最烦人的。优化文字大小,这是最好的改进。除此之外,作为重新加工到智能站点时的修正点,

  • 使它成为一个简单的设计
  • 控制一个屏幕上显示的信息量
  • 使用100%水平宽度显示整个屏幕

它被引用。

采用简单的设计,可以弥补通信速度导致的慢速显示。即使您不加载用CSS装饰的图像,或者只是更改为可以使用简单CSS制作的设计,它也会变得更快。此外,由于智能手机的屏幕较小,因此需要控制在一个屏幕上显示的信息量。

通过使布局配置为2列,3行到1列,即使在智能手机中也可以轻松查看。我们将更改布局,以便在主要内容下显示侧栏等,并从具有最高优先级的侧栏显示。

如果通过指定布局宽度的数值来修复站点,则将创建不必要的空白区域。这是从智能屏幕的左右宽度以数字方式显示指定宽度的比例。通过指定和更改以使用100%显示左右宽度,无法进行额外的aki并使用整个屏幕显示。

优化程序

  • 将视口设置为META标记
  • 分发CSS

智能手机通信网站只是持有这两个项目是非常不同的。

META标签的视口设置有助于博客的文章归结。如果你想暂时对应智能手机,那么让我们在<meta name =“viewport”content =“width = device – width”>>字符中加一个元标记。

如果 以数字方式指定布局的宽度,则可以通过将布局的宽度和编号指定为
<meta name =“viewport”content =“width = 640 ”>
来防止边距。视口的其他设置如下。

width =“ 范围200到10000 ”:显示区域的宽度(匹配设备宽度与设备宽度)
height =“ 范围233到10000 ”:显示区域的高度(设备高度是屏幕的高度)被匹配)
“初始规模= 范围尺度〜最大-最小尺度 ‘:初始变焦倍率
最小规模=’ 0范围 ‘:最小倍率
最大规模=’ 0范围 ”:最大放大率
用户 – 可扩展=“ 是或否 ”:缩放操作
多个规格以逗号分隔。
<meta name =“viewport”content =“width = 640,initial-scale = 1,minimum-scale = 0.5,maximum-scale = 2 ”>

CSS

CSS有一种准备多个外部CSS并按屏幕大小排序的方法,以及一种在一个CSS文件中指定所有内容的方法。如果您想在PC站点和智能站点之间严格更改设计,您认为如果要部分更改它,使用一个CSS管理外部CSS将更加用户友好。

通过外部CSS排序时

<链路媒体= “仅屏幕和 (MAX-设备宽度:640像素)的” href = “ 智能手机为的CSS”类型= “文本/ CSS的”相对= “样式表”>
<LINK媒体=“屏幕和(敏设备-Width:641Px) “HREF =” PC为的CSS “的CSS”型= “文本 / CSS”的rel = “样式表”>

以这种方式,以及用于智能手机CSS要在小的屏幕比在最大的设备宽度指定的大小,分为CSS为PC时读取到读大屏幕比最小设备宽度指定大小的时间。

如果将其添加到一个CSS文件并写入

@media屏幕和(最大宽度:640px)
{
~~~智能手机的CSS ~~~
}

这样,我们创建了一个样式表,当屏幕大小小于或等于max-width指定的数值时应用该样式表。由于CSS从顶部按顺序读取并且相同的类名被覆盖,如果它没有详细分发,如果在最后描述它,则更容易将其作为智能手机的CSS进行管理。

虽然我粗略地写了,如果它是一个新的浏览器,这将是一个智能手机的网站。

通过使用META标记设置视口,它被识别为与智能手机对应的站点。我认为那里的精细调整将是创作者武器的展览。


  • 电话咨询
  • 免费(qq)咨询