怎么动手写手机网站

作者: 独享奢华 | 来源:发表于2017-12-05 20:11 被阅读20次

怎么动手写手机网站

最近一直在研究移动手机网站的开发，发现做手机网站没有想象中的那么难。为什么会这么说呢？我们试想下:我们连传统的PC网站都会做，难道连一个小小的手机网站难道都搞不定吗？其实手机网站就是一个微缩版的PC网站罢了！

手机网站基本框架代码：

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>手机网站</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <script type="text/javascript">
    //根据屏幕大小及dpi调整缩放和大小
    (function() {
        var scale = 1.0;
        var ratio = 1;
        if (window.devicePixelRatio >= 2) {
            scale *= 0.5;
            ratio *= 2;
        }
        var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
        document.write(text);
        document.documentElement.style.fontSize = 50 * ratio + "px";
    })();
    </script>
    <!--启用 WebApp 全屏模式（IOS）-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <!--设置状态栏的背景颜色（IOS）,在web app应用下状态条（屏幕顶部条）的颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--添加到主屏后的标题（IOS）-->
    <meta name="apple-mobile-web-app-title" content="标题">
    <link rel="icon" href="http://ms0.meituan.net/touch/img/icon/favicon.ico" type="image/x-icon">
    <!--苹果移动设备（ipod、ipad、iphone）对移动网站-mobile web进行收藏（“添加到桌面图标”）的时候增加的图标定义属性-->
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://ms0.meituan.net/touch/img/startup/apple-touch-icon-57x57-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://ms0.meituan.net/touch/img/startup/apple-touch-icon-120x120-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="196x196" href="http://ms0.meituan.net/touch/img/startup/apple-touch-icon-196x196-precomposed.png">
    <!--IOS Web app启动动画-->
    <link rel="apple-touch-startup-image" href="http://ms0.meituan.net/touch/img/startup/apple-touch-startup-image-640x1096.png" media="(device-height:568px)">
    <link rel="apple-touch-startup-image" href="http://ms0.meituan.net/touch/img/startup/apple-touch-startup-image-640x920.png" media="(device-height:480px)">
    <!-- iPhone -->
    <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
    <!-- iPhone (Retina) -->
    <link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPad (portrait) -->
    <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
    <!-- iPad (landscape) -->
    <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
    <!-- iPad (Retina, portrait) -->
    <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPad (Retina, landscape) -->
    <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!--移动端手机号码识别（IOS）-->
    <meta name="format-detection" content="telephone=no">
    <!--移动端邮箱识别（Android）-->
    <meta name="format-detection" content="address=no">
    <!--优先使用最新版本 IE 和 Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link href="css/style.css" rel="stylesheet"/>
    <style>
        body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}
        .viewport{ max-width:640px; min-width:300px; margin:0 auto;}
    </style>
    </head> 
    <body>
        <div>
            大家好！这是手机网页！
        </div>
    </body>
</html>

至于为什么觉得难、觉得无从下手。有以下几点：

一、没有完整的思路和流程

就像做网站的流程一样，如果你能知道它的流程，我相信就不会觉得做手机网站难！真正难的是你没有思路。

二、把html5这门技术想的高深莫测

好像觉得学会用html5+css3做手机网站，就相当于学会了顶尖的绝世武功。其实你错了！不要把html5这玩意想的太高深，其实做手机网站，真正意义上用不到什么的html5的强大功能。(可能对于一些不懂什么技术的小白而言：你的手机网站是用HTML5+CSS3做的啊，简直牛逼呀！能用上目前互联网上最新最前沿的技术。其实明眼人一看，就知道是用什么技术做的。俗话说的好："外行看热闹，内行看门道")
下面就说说怎么来开发移动手机网站吧！
基本上开发手机网站，可大致分为两大类。一类是用框架开发手机网站。一类是自己手写手机网站。

一、框架开发手机网站

一般用现在常用的开发框架有：目前Web前端最火的框架（BootStrap）、Jquery mobile..当然可能还有一些移动端开发的框架，rachet.js
为什么说BootStrap是目前前端最火热的开发框架呢？
因为bootstrap自带响应式布局（栅格系统），而且能做到移动设备优先的原则。

运用bootstrap来开发网站有什么好处呢？

1.不懂设计也可以做网站

就算不懂设计，你的网页在Bootstrap的帮助下，也能拥有超高颜值。它强大的内置样式库让你的作品变成尤物。
主要体现在：字体文件和bootstrap自带的UI样式。（为广大不会UI设计的程序员，提供了福音）

2.上手快

你可以专心解决问题，冗繁的细节都丢给Bootstrap操心。可以做到一次开发，就可适配所有终端，并且能迅速上手并建出网站原型。还提供很多丰富的插件，就算你不会JS，基本能看懂常见的API，网站上的效果，基本能解决。

缺点：

1.不遵循最佳实践

我们在使用Bootstrap时遇到的最大问题之一是你的DOM元素上将拥挤大量的类。这打破了良好的web设计基本规则之一，HTML不再有语义，而且内容和表示不再分离。前端纯粹主义者会觉得这相当令人讨厌，以为它使可扩展性、重用性和维护性遇到了更大的挑战。

2. Bootstrap 太重

直接点说：就是CSS和JS有点点大。CSS压缩后115k,JS压缩后35k
如果你想要使用Bootstrap的所有功能，你应该好好考虑资源的加载时间。当然，对于一些地方这可能不是问题，但是在新西兰互联网不得不横跨太平洋，这时数据达到那儿将是很缓慢的。因此考虑你的目标市场。
相信任何框架都有它的优点，同时也是有它的缺点的。没有一个产品是很完美的，所以根据自身实际情况进行选择。至于一些其它框架暂时不做过多的解释了，相信只要你肯愿意百度一下，就可以找到你想要的答案。

二、手写手机网站

一般我们自己手动开发手机网站的话，基本可以划分两类来做到。一类是通过在网页头部添加meta标签进行实现（网页指html5的格式来开发）。另一类是通过CSS3的Media标签（媒介查询）来实现。不了解媒介查询的朋友，可以看看这篇文章：响应式布局。
在这里我们详细讲解下,利用添加meta标签来做手机网站。
基本在网页头部我们只需添加四个meta标签就可以实现一个手机网站的框架。我一起来看看是哪些meta标签。

1、添加viewport标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

详细属性：

width ---- viewport的宽度（width=device-width意思是：宽度等于设备宽度）
height ------ viewport的高度（height=device-height意思是：高度等于设备宽度）
initial-scale ----- 初始的缩放比例
minimum-scale ----- 允许用户缩放到的最小比例
maximum-scale ----- 允许用户缩放到的最大比例
user-scalable ----- 用户是否可以手动缩放

2、禁止将数字变为电话号码

<meta name="format-detection" content="telephone=no" />

一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，so，取消这个很有必要！

3、iphone设备中的safari私有meta标签

<meta name="apple-mobile-web-app-capable" content="yes" />

它表示：允许全屏模式浏览，隐藏浏览器导航栏

4、iphone的私有标签

<meta name="apple-mobile-web-app-status-bar-style" content="black">

它指定的iphone中safari顶端的状态条的样式
默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）
另外还有一个个性化的link标签，它支持用户将网页创建快捷方式到桌面时，其图标变为我们自己定义的图标。比如手机腾讯网上的标签：

<link rel="apple-touch-icon-precomposed" href="http://3gimg.qq.com/wap30/info/info5/img/logo_icon.png">

不过腾讯对这个png图标的命名并不规范，常规我们要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层，后者则不会添加这些效果。

苹果图标apple-touch-icon-precomposed和apple-touch-icon两种设置的区别探究

苹果safari浏览器当中apple-touch-icon-precomposed 和 apple-touch-icon属性是有区别的
图标设置的属性分为：
apple-touch-icon 和 apple-touch-icon-precomposed两种属性，从字面意思上可以看出，第一个是 “苹果移动设备图标”，第二个为“苹果移动设备初始图标样式”
使用apple-touch-icon属性的明显比使用apple-touch-icon-precomposed图标多出一个高光，因为在ios系统中对icon有一套规范，就是在ios设备的图标统一为“四边圆角”、“高光处理”，至于“图标阴影”，是ios设备中统一为所有桌面元素增加的，所以不作为图标单独处理的样式，由于在视觉上统一最重要的是形状的统一，所以“圆角”是必须的，但是对于“高光”苹果没有做出特别的强调，所以苹果设置当中把“高光”作为可选项，就产生了apple-touch-icon 和 apple-touch-icon-precomposed属性。
结论：
使用apple-touch-icon属性为“增加高光光亮的图标”；
使用apple-touch-icon-precomposed属性为“设计原图图标”；

apple-touch-startup-image启动画面

横屏和竖屏：
<link rel="apple-touch-startup-image" media="screen and (orientation: portrait)" href="milanoo_startup.png" />
<link rel="apple-touch-startup-image" media="screen and (orientation: landscape)" href="milanoo_startup1.png" />

HTML/CSS 移动端

关闭iOS键盘首字母自动大写

在iOS中，默认情况下键盘是开启首字母大写的功能的，如果启用这个功能，可以这样：

<input type="text" autocapitalize="off" />
关闭iOS输入自动修正

和英文输入默认自动首字母大写那样，IOS还做了一个功能，默认输入法会开启自动修正输入内容，这样的话，用户经常要操作两次。如果不希望开启此功能，我们可以通过input标签属性来关闭掉：

<input type="text" autocorrect="off" />
禁止文本缩放

当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：

html {
　　-webkit-text-size-adjust: 100%;
}

需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效，必须设置 `meta viewport'。

移动端如何清除输入框内阴影

在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

input,
textarea {
　　border: 0; /* 方法1 */
　　-webkit-appearance: none; /* 方法2 */
}

快速回弹滚动

我们先来看看回弹滚动在手机浏览器发展的历史：

早期的时候，移动端的浏览器都不支持非body元素的滚动条，所以一般都借助 iScroll;
Android 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动；
Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果，不过随后这个特性又被移除；
iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果

在iOS上如果你想让一个元素拥有像 Native 的滚动效果，你可以这样做：

.xxx {
    overflow: auto; /* auto | scroll */
    -webkit-overflow-scrolling: touch;
}

PS：iScroll用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，官方地址：
http://www.idangero.us/sliders/swiper/index.php

移动端禁止选中内容

如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：

.user-select-none {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all （移动端不需要） */
  -ms-user-select: none;      /* IE 10+ */      
}

移动端取消touch高亮效果

在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止：

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

但这个方法在三星的机子上无效，有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。

如何禁止保存或拷贝图像（IOS）

通常当你在手机或者pad上长按图像 img ，会弹出选项存储图像或者拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：

img { -webkit-touch-callout: none; }

怎么动手写手机网站

怎么动手写手机网站

手机网站基本框架代码：

一、没有完整的思路和流程

二、把html5这门技术想的高深莫测

一、框架开发手机网站

运用bootstrap来开发网站有什么好处呢？

1.不懂设计也可以做网站

2.上手快

缺点：

1.不遵循最佳实践

2. Bootstrap 太重

二、手写手机网站

1、添加viewport标签

2、禁止将数字变为电话号码

3、iphone设备中的safari私有meta标签

4、iphone的私有标签

苹果图标apple-touch-icon-precomposed和apple-touch-icon两种设置的区别探究

apple-touch-startup-image启动画面

HTML/CSS 移动端

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读