SmartPhone手机网站的制作-白红宇

SmartPhone手机网站的制作

阅读量：4982 次

发布时间：2019-06-12

本文共 7789 字，大约阅读时间需要 25 分钟。

刚开始努力有点偏，看到响应式网站去了，其实主要是要用JQuery Mobile

做一个像应用的网站。

JQuery Mobile的教程

介绍了怎么自定义颜色主题等等。

利用了遍历的JS框架，就必须忍受默认的CSS带来的束缚。

布局上也不像平时想浮动就浮动。基本上所有元素的属性都是既定的，为了避免冲突，需要用固有布局来改。

比如横向两栏的布局，父容器class ui-grid-a，子容器 ui-block-a,uiblock-b;

垂直列表用data-role="listview"。

最后针对不同设备，还是要用到媒体查询。不过针对手机就不需要像响应式网站做的分辨率那么多种了。

响应式的做法：

首先，CSS和一般的RESET有些不同：

度娘找响应式布局就会发现百科里面有这些附加设置：

html {

-webkit-text-size-adjust： none;

}

/* 设置HTML5元素为块 */

article， aside， details， figcaption， figure， footer， header， hgroup， menu， nav， section {

display： block;

}

/* 设置图片视频等自适应调整 */

img {

max-width： 100%;

height： auto;

width： auto\9; /* ie8 */

}

.video embed， .video object， .video iframe {

width： 100%;

height： auto;

}

最后要注意的是在页面的头部<head></head>之间加上下面这句∶

meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

参数设置∶

width – viewport的宽度

height – viewport的高度

initial-scale – 初始的缩放比例

minimum-scale – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放

另外，在老师博客看到图片的详细设置：

　img { max-width: 100%;}与上面相同

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

　　img, object {
max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

　　img {
width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的：

　　img {
-ms-interpolation-mode: bicubic; } //这是上面没有提到的。

把CSS都设置好了以后，对应一些不同尺寸的屏幕，使用Media Query编写CSS。

常见的几个尺寸有：

@media screen and (max-width: 1140px) and (min-width: 1024px){#social-box{display:inline}#social-box-vert,#wallpaper{display:none}} @media screen and (max-width: 1023px) and (min-width: 768px){.side-home{margin-left:14px;padding-right:0px}#home-right{border-right:none;border-left:none;margin-left:14px;padding-right:0;padding-left:0px;width:300px}}

@media screen and (max-width: 767px) and (min-width: 600px){#home-right{border-right:none;padding-right:none}} @media screen and (max-width: 599px) and (min-width: 480px){#home-right{border-right:none;margin-left:0;padding-right:0;width:420px;border-left:none;padding-left:0px}} @media screen and (max-width: 479px){.side-home{margin-left:0;margin-top:20px;padding-right:0px}#home-right{margin-bottom:0px;border-right:none;margin-left:0;padding-right:0;width:300px;border-left:none;padding-left:0px}} @media screen and (min-width: 1000px){#gameoftheday{display:none}}

实际做smartphone的时候分得很细，可是320这一档适用的机型是在太多了，iphone5,4,3还有安卓，屏幕表现还不一定一样！

/*pad*/
@media screen and (min-width: 769px){}
/*horizontal iphone5 568x320*/
@media screen and (max-width: 768px) and (min-width: 481px){}
/*horizontal iphone4 480x320,large android*/
@media screen and (max-width: 480px) and (min-width: 380px){}
/*=====vertical iphone5 320x568,vertical iphone4 320x480 ,Android=====*/
@media screen and (max-width: 379px) and (min-width: 320px){}
/*-----small Android-----*/
@media screen and (max-width: 319px) and (min-width: 240px){}
/*further small*/
@media screen and (max-width: 239px){}

媒体查询也可以用高度，不过不常见，手册在：

具体使用比较有讲究，来自ADOBE的文章

( width , height , device-width , device-height , 和 orientation ) 是最有用的。您可以为大部分功能添加 min- 和 max- 作为前缀，以表示最小和最大值，比如 min-width 和max-width 。表 1 中的“最大值/最小值”列表是哪些功能可通过此方式修改。

width、device-width和viewport

媒体查询的一个最容易混淆的方面或许就是width和height与添加了前缀device-的类似值之间的区别。对于桌面和平板计算机，它们之间的区别很容易理解：width 和 height指浏览器视区的尺寸，而device-width和device-height指显示器的尺寸。不是每个人都会全屏运行他或她的浏览器，所以width 和 height是您需要使用的度量方法。

移动浏览器将填满可用的屏幕，所以您可能期望width和device-width是相同的。不幸的是，并不总是这样。大多数智能电话（包括Android、iPhone和Windows Phone 7）将width设置为大约1,000像素宽的标称视区（在iPhone和iPod touch中，它为980像素；Windows Phone 7使用1024像素）。图4展示了iPod touch通常如何显示前面插图中的示例页面。
即使附加到页面上的样式表使用媒体查询，依据min-width 和 max-width 的值来提供不同样式，iPod touch会忽略这些样式并显示桌面版本，因为它的视区被视为980像素宽。

更让人混淆的是，iPhone、iPod touch和iPad在计算宽度时不会考虑方向，而其他设备会。

幸运的是，这种混淆情形有一个简单的解决方案。苹果公司设计了一个新的<meta>标记，它已被其他移动设备制造商广泛采用，已合并到可能会被万维网联盟（W3C）批准的规范中。要为支持媒体查询的所有设备提供公平的机会，只需向每个网页的<head>添加以下这行代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

这告诉移动设备，将视区视为具有设备的物理宽度相同的宽度。而且，它还告诉iPhone、iPod touch和iPad在计算宽度时考虑方向。这样，您可以在媒体查询中安全地使用width，因为您知道它的用途与您所想的相同。

注意：许多移动设备（最显著的就是iPhone 4和iPad 2）拥有高分辨率的显示屏，具有比桌面或平板显示器高得多的像素密度。这不会影响您在CSS中计算像素大小的方式。CSS规范要求，如果输出设备的像素密度与典型计算机显示器的像素密度差别巨大，浏览器应该重新调节像素值。一些开发人员现在将像素度量方法称为CSS像素。

另外有个使IE6,7,8兼容媒体查询CSS的JS

各种表单组件可以用

除了用CSS设置图片大小，还可以用JS：

var imgSizer = {    Config : {        imgCache : []        ,spacer : "/path/to/your/spacer.gif"    }    ,collate : function(aScope) {        var isOldIE = (document.all && !window.opera && !window.XDomainRequest) ? 1 : 0;        if (isOldIE && document.getElementsByTagName) {            var c = imgSizer;            var imgCache = c.Config.imgCache;            var images = (aScope && aScope.length) ? aScope : document.getElementsByTagName("img");            for (var i = 0; i < images.length; i++) {                images[i].origWidth = images[i].offsetWidth;                images[i].origHeight = images[i].offsetHeight;                imgCache.push(images[i]);                c.ieAlpha(images[i]);                images[i].style.width = "100%";            }            if (imgCache.length) {                c.resize(function() {                    for (var i = 0; i < imgCache.length; i++) {                        var ratio = (imgCache[i].offsetWidth / imgCache[i].origWidth);                        imgCache[i].style.height = (imgCache[i].origHeight * ratio) + "px";                    }                });            }        }    }    ,ieAlpha : function(img) {        var c = imgSizer;        if (img.oldSrc) {            img.src = img.oldSrc;        }        var src = img.src;        img.style.width = img.offsetWidth + "px";        img.style.height = img.offsetHeight + "px";        img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"        img.oldSrc = src;        img.src = c.Config.spacer;    }    // Ghettomodified version of Simon Willison's addLoadEvent() -- http://simonwillison.net/2004/May/26/addLoadEvent/    ,resize : function(func) {        var oldonresize = window.onresize;        if (typeof window.onresize != 'function') {            window.onresize = func;        } else {            window.onresize = function() {                if (oldonresize) {                    oldonresize();                }                func();            }        }    }}

imgSizer.js

addLoadEvent(function() {　　　　var imgs = document.getElementById("content").getElementsByTagName("img");　　　　imgSizer.collate(imgs);　　});

基本上也是IE7需要用：

暂时资料准备到这里，具体做了以后再总结一个完备的CSS reset，这是一开始做打算用的版本：

/* reset */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{
   display:block}audio[controls],canvas,video{
   display:inline-block;*display:inline;*zoom:1}html{
   font-size:100%;overflow-y:scroll;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-ms-text-size-adjust:100%;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0px; padding:0px; font-family:'微软雅黑', Meiryo, "ＭＳ Ｐゴシック", Hiragino Kaku Gothic Pro, sans-serif;}table {
    border-collapse:collapse; border-spacing:0;}fieldset,img {
    border:0px; margin:0; padding:0; vertical-align:bottom;}img,object{
   max-width:100%; height:auto; width:auto\9; /* ie8 */ *width: 100%;/* ie6 */-ms-interpolation-mode: bicubic;}.video embed， .video object， .video iframe {
   width:100%; height:auto;}address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal; font-weight:normal;}ol, ul, li, dl, dt, dd {
    list-style-type:none outside none; _list-style-type:none; }caption,th {
   text-align:left;}h1,h2,h3,h4,h5,h6 {
   font-size:100%;font-weight:normal;}q:before,q:after {
   content:'';}abbr,acronym {
    border:0;}a{
    text-decoration:none; cursor:pointer;}