精华内容
下载资源
问答
  • 移动端Web开发

    千人学习 2019-09-23 15:58:04
    HTML5是移动端开发最常用的技术,熟悉HTML5新标签和Api以及CSS3的新的Api,可以使你的网页更加的绚丽多彩,并且开发出你意想不到的网页效果。学完此课程,你编写的代码就可以移动设备上完美兼容啦。
  • 移动端web开发技巧汇总与经验分享,已经涵盖了web移动端开发的方方面面,web移动端开发不可多得的干货,值得一看。(1);initial-scale maximum-scale=1.0;user-scalable u2033name=”viewport”/>(2)”name=”apple-...
  • 移动端web开发

    2017-05-25 09:29:08
    移动端和PC端在代码书写上有什么区别呢? 下面是基础的HTML模板,使用工具... ...head> meta charset="UTF-8"> title>Documenttitle> head> ...这段代码,并没有告诉我们移动端开发有什么不同,现在需要加一些东西。 ht

    移动端和PC端在代码书写上有什么区别呢?

    下面是基础的HTML模板,使用工具自动生成的:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    
    </body>
    </html>
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    这段代码,并没有告诉我们移动端开发有什么不同,现在需要加一些东西。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>标题</title>
    <link rel="stylesheet" href="index.css">
    </head>
    <body>
        Hello World!
    </body>
    </html>
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    我们可以看到,上面就是加了很多meta, meta标签用来干什么的不知道?meta

    meta用来描述页面相关的一些信息。

    1、用来描述视口的信息,将宽度设置为设备的宽度,初始化缩放比例为1,最大放大比例为1,不允许用户被缩放,我们还可以设置最小缩小比例minimum-scale=1.0

    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
     
    • 1

    2、用来描述是都删除苹果设备默认的工具栏和菜单栏,yes删除,no保留

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

    3、描述苹果设备的状态栏样式,可选值有black黑色,default默认白色,black-translucent灰色

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

    4、描述是否将页面上的数字格式化为电话连接,yes为格式化,no为不格式化

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

    5、描述是否将页面上的文字格式化为电子邮件,yes为格式化,no为不格式化

    <meta content="email=no" name="format-detection">
     
    • 1

    6.描述内核渲染模式,可用于国内的双核浏览器,如搜狗,QQ,360,遨游。可用取值有webkit,ie-comp
    ie-stand

     <meta name="renderer" content="webkit">
     
    • 1

    7、优先使用最新版本和Chrome,

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     
    • 1

    8、针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓

    <meta name="HandheldFriendly" content="true">
     
    • 1

    9、微软的老式浏览器

    <meta name="MobileOptimized" content="320">
     
    • 1

    9、uc强制竖屏

    <meta name="screen-orientation" content="portrait">
     
    • 1

    10、QQ强制竖屏

    <meta name="x5-orientation" content="portrait">
     
    • 1

    11、 UC强制全屏

    <meta name="full-screen" content="yes">
     
    • 1

    12、 QQ强制全屏

    <meta name="x5-fullscreen" content="true">
     
    • 1

    13、UC应用模式

    <meta name="browsermode" content="application">
     
    • 1

    14、QQ应用模式

    <meta name="x5-page-mode" content="app">
     
    • 1

    15、windows phone 点击无高光

    <meta name="msapplication-tap-highlight" content="no">
     
    • 1

    除了meta,还可以设置link

    这个apple-touch-icon属性是苹果设备的特有属性,用于在将当前网页添加到桌面快捷方式的时候显示的图标。图标只有在使用的时候才会下载。当不设置这个link时,ios设备的safari浏览器回去网页的根目录下寻找这个文件,当没有时会使用网页的快照作为图标。生成的图标默认是带有圆角和高亮的,如果不需要的话,在设置link时需要将apple-touch-icon替换为apple-touch-icon-precomposed。在寻找图标的时候,不同分辨率的设备拥有不同的图标推荐尺寸,有相等尺寸的则选择相等的,没有则选择比大的最近的尺寸,如果没有再匹配其他相近的尺寸。如果符合尺寸的图标不止一个,则优选带有precomposed关键字的图标。选择的顺序如下:

    1. apple-touch-icon-57×57-precomposed.png
    2. apple-touch-icon-57×57.png
    3. apple-touch-icon-precomposed.png
    4. apple-touch-icon.png

    Retina设备的图标大小是普通设备的两倍,因此也不用指定4套不同的图标,而只需要制作Retina的便可,ios设备会自动缩放。但是还是设置四个link,只是在指定href属性时让他们只想相同的文件便可,常用的尺寸有57*57,72*72,114*114,144*144.更多尺寸请参照

    <link rel="apple-touch-icon" href="apple-icon-iphone.png">
    <link rel="apple-touch-icon" href="apple-icon-ipad.png" size="72*72">
    <link rel="apple-touch-icon" href="apple-icon-iphone-retina.png" size="120*120">
    <link rel="apple-touch-icon" href="apple-icon-ipad-retina.png" size="150*150">
     
    • 1
    • 2
    • 3
    • 4

    来一个稍全的HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta charset="UTF-8" />
        <meta name="renderer" content="webkit" />
        <meta http-equiv="X-UA-Compatible" content="IE=EDGE, chrome=1">  
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="format-detection" content="telephone=no" />  
        <title>Document</title>
        <link rel="apple-touch-icon" href="apple-icon-iphone.png">
        <link rel="apple-touch-icon" href="apple-icon-ipad.png" size="72*72">
        <link rel="apple-touch-icon" href="apple-icon-iphone-retina.png" size="120*120">
        <link rel="apple-touch-icon" href="apple-icon-ipad-retina.png" size="150*150">
    </head>
    <body>
    
    </body>
    </html>
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    写好结构了,自然应该写样式了

    对于样式,为了完美适配各分辨率的设备,应该使用CSS3的媒体查询,在不同分辨率下,应用不同的样式。更多媒体查询..

    @media screen and (min-width:240px) {
        html,body,button,input,select,textarea {
            font-size: 9px;
        }
    }
    @media screen and (min-width:320px) {
        html,body,button,input,select,textarea {
            font-size: 12px;
        }
    }
    @media screen and (min-width:380px) {
        html,body,button,input,select,textarea {
            font-size: 12px;
        }
    }
    @media screen and (min-width:420px) {
        html,body,button,input,select,textarea {
            font-size: 16px;
        }
    }
    @media screen and (min-width:450px) {
        html,body,button,input,select,textarea {
            font-size: 18px;
        }
    }
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    这里为什么都是对font-size进行设置呢?这叫要说到移动端开发的所谓响应式的,整个网页要根据网页的大小来动态改变,那就意味着网页中的元素也要根据屏幕的大小来变化,自然对于每一个分辨率的屏幕都做一个样式表也是可以的,但是这样代码的复用率也就无从弹起了,那这时候应该怎样呢?既然屏幕是大小在变,而整个网页的布局都是在按照设计的比例进行变化。说到比例,我们最常用的标准化的比例也就是百分比,在响应式的网页中百分比自然是不可或缺的。在PC端开发的时候已经经常会用到百分比,但是它都是相对于父级元素来讲的,那么父级元素的大小从何而来,无从下手,PC端我们通常靠px固定一个元素,但移动端不行,移动端针对的分辨率太多了,少了可变性。刚才讲到我们应该用比例,比例如C = A : B,比例是先对的,有一个参照,也就是数学中除数和被除数的概念,被除数为B,除数为A,被除数则就是那个参照物,要得到A,只需要知道B,A = B*C。在移动端开发中这个参照B是什么呢,B就是这个html下的font-size。特别强调的是是html下的font-size,但是难道每次都去写几倍几倍于font-size吗?这里,给html的font-size提供了一个表示rem,我们知道行内字体大小的时候常用em,它也是针对于字体大小的,但是em是针对于继承的字体大小,个人理解rem应该是root em 的简写,就是根的意思。所以我们在移动开发的时候就只需要设置html的字体大小,其他全部都可以用rem的倍数表示了,如html的字体大小为12px,元素的width: 2rem就表示元素的宽度为24px; 
    在浏览器中,默认html的字体大小为16px,也就是说,默认的1rem = 16px。因此看到网上很多这样的写法

    html {
        font-size: 62.5%;
    }
     
    • 1
    • 2
    • 3

    这个62.5%怎么来的呢,也就是继承默认。62.5% * 16px = 10px;将1rem规范化为10px;

    在PC开发中会引入一个reset的css文件用于归一化样式,但是后来发现reset过于古板和陈旧,现在使用normalize.css。

    在网上看到一个值得借鉴的媒体查询的

    @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}
    @media only screen and (max-device-width :480px){ }
    @media only screen and (min-device-width :481px){ }
    
    /*6*/
    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }
    
    /*6+*/
    @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }
    
    /*魅族*/
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }
    
    /*mate7*/
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }
    
    /*4 4s*/
    @media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }
    
    @media screen and (min-width: 320px) and (max-width: 480px) {  }
    
    /* 平板之类的宽度 1024 以下设备 */
    @media only screen and (min-width: 321px) and (max-width: 1024px) {
    body {
    background: blue;
    }
    }
    
    /* PC客户端或大屏幕设备: 1028px 至更大 */
    @media only screen and (min-width: 1029px) {
    body {
    background: green;
    }
    }
    
    /* 竖屏 */
    @media screen and (orientation:portrait) and (max-width: 720px) {对应样式}
    
    /* 横屏 */
    @media screen and (orientation:landscape){对应样式}
    展开全文
  • 移动端Web开发 基础知识

    千次阅读 多人点赞 2021-09-26 16:07:15
    文章目录移动端Web开发移动端基础浏览器视口样式编写分辨率和设备像素比二倍图SVG矢量图 移动端Web开发 移动Web开发的两种主流方案,一种是单独制作移动端页面,另一种是制作响应式页面 移动端页面: 单独制作移动端...

    移动端Web开发

    移动Web开发的两种主流方案,一种是单独制作移动端页面,另一种是制作响应式页面

    移动端页面:

    单独制作移动端页面的优势和劣势:
    在这里插入图片描述
    单独制作移动端页面,通常的做法是不改变原有的PC端页面,然后针对移动端单独开发出一套特定的版本。

    • 如果是移动设备(iPhone 6/7/8 Plus),则跳转到移动端页面
    • 如果是PC端设备,则跳转到PC端页面

    响应式页面:

    响应式页面指的是同一页面在不同屏幕尺寸下实现不同的布局,从而使一个页面兼容不同的终端。

    响应式开发主要是为了解决移动互联网浏览的问题

    响应式页面的优点:

    • 可以跨平台。响应式开发具有跨平台的优势,能够快捷地解决多终端设备的显示适配问题。
    • 便于搜索引擎收录,无论在移动端设备还是PC端上访问的都是同一个链接地址,这样就减少了权重的分散。让网站对搜索引擎更加友好。
    • 节约成本。响应式网站可以兼容多个终端,开发者不需要为各个终端编写不同的代码。对于开发者而言,减少了大量重复的工作,提高了工作的效率;对于公司而言,节省了人员开支,降低了开发成本

    1、移动端开发选择:

    单独移动端页面(主流):

    通常情况下,网址域名前面加 m(mobile) 可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。

    响应式兼容PC移动端(其次):

    通过判断屏幕宽度来改变样式,以适应不同终端。

    2、移动端技术选型:

    单独制作移动端页面:

    • 流式布局(百分比布局)
    • flex 弹性布局(强烈推荐)
    • less+rem+媒体查询布局
    • 混合布局

    响应式页面兼容移动端:

    • 媒体查询
    • Bootstrap

    移动端基础

    浏览器

    浏览器按照设备类型来划分,主要包括PC端浏览器移动端浏览器

    浏览器内核主要包括Blink、WebKit和Trident等。

    PC端常见浏览器:

    PC端的浏览器主要包括Google(谷歌)公司的Chrome浏览器(推荐)、Mozilla公司的Firefox浏览器、和Edge浏览器等。

    Chrome浏览器的优势

    • 市场占有率高,兼容性好,界面简洁、简单易用。基于强大的JavaScript V8引擎,速度很快。
    • 可通过扩展插件增强功能,便于开发人员使用。内置防止网络钓鱼及恶意软件功能,更加安全。
    • 跨平台,支持PC端的Windows、Linux和Mac系统,以及移动端的Android和iOS系统。

    移动端常见浏览器:

    移动端设备主要包括Android、iOS等手机设备。

    手机屏幕现状:

    • 移动端设备屏幕尺寸非常多,碎片化严重。
    • Android设备有多种分辨率:480x800, 480x854, 540x960,720x1280,1080x1920等,还有传说中的2K,4k屏。
    • 近年来iPhone的碎片化也加剧了,其设备的主要分辨率有:640x960, 640x1136, 750x1334, 1242x2208等。
    • 作为开发者无需关注这些分辨率,因为我们常用的尺寸单位是 px 。
      屏幕尺寸非常多,手机分辨率和大小也不尽相同,碎片化严重。

    移动端的浏览器主要包括Android Browser和Mobile Safari,以及国产浏览器

    浏览器的内核主要是Webkit内核,对HTML5提供了很好的支持。

    国产浏览器主要包括UC浏览器、QQ浏览器和百度浏览器等。都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。
    在这里插入图片描述

    总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可。

    移动Web开发需要注意

    • 1、移动端设备受屏幕尺寸限制:操作的局限性比较大,所以要注意页面的结构不能过于复杂,要提炼出该网站最核心的功能,并简洁清晰地呈现出来。
    • 2、移动端的操作方式的改变:移动端页面的所有交互活动由鼠标控制变为手指触屏控制,操作方式更加丰富,如摇一摇、双指放大、滑动、双击、单击等。

    移动端调试方法:

    • Chrome DevTools(谷歌浏览器)的模拟手机调试
    • 搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器
    • 使用外网服务器,直接IP或域名访问

    视口

    视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

    1、布局视口(layout viewport)

    • 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。
    • iOS, Android基本都将这个视口分辨率设置为 980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。在这里插入图片描述

    2、视觉视口 (visual viewport)

    • 它是用户正在看到的网站的区域。注意:是网站的区域。
    • 可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度
      在这里插入图片描述

    3、理想视口(ideal viewport)

    • 为了使网站在移动端有最理想的浏览和阅读宽度而设定
    • 理想视口,对设备来讲,是最理想的视口尺寸
    • 需要手动添写meta视口标签通知浏览器操作
    • meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,布局的视口就多宽

    meta视口标签:

    在传统的PC端网页开发中,并没有使用过meta标签来设置视口,此时浏览器会按照默认的布局视口宽度来显示网页。如果希望网页在浏览器中以理想视口的形式呈现,就需要利用标签设置视口。
    在标签中,将name属性设为viewport,即可设置视口。

    在这里插入图片描述
    在实际开发中,通常会将视口设置为不允许用户缩放页面、视口宽度等于设备宽度、初始缩放比为1.0,最大缩放比为1.0,示例代码如下。

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

    样式编写

    利用Normalize.css初始化默认样式:

    在传统的PC端Web开发中,一些旧版本的浏览器不符合W3C标准,有些不支持HTML5和CSS3的新特性,给开发人员带来了许多麻烦。

    在移动Web开发中,几乎不用担心浏览器的兼容问题,因为移动端的浏览器基本上都是以WebKit内核为主,对HTML5和CSS3的支持非常好。

    Normalize.css的特点:

    在这里插入图片描述

    • 下载Normalize.css
    • 引入Normalize.css文件
    <head>
      <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
      <link rel="stylesheet" href="normalize.css">
    </head>
    

    设置移动端的特殊样式:

    在实际开发中,移动Web页面的设计风格更接近App(手机应用),而不是传统的网页。为了有更好的用户体验,我们可以给移动Web页面设置一些特殊样式。

    移动端的特殊样式是非标准的,因此加上了私有前缀“-webkit-”,该前缀在WebKit和Blink内核的浏览器中有效,适用于Chrome浏览器和大多数移动端浏览器。

    在移动Web开发中经常会设置的特殊样式,如表所示:
    在这里插入图片描述

    分辨率和设备像素比

    1、分辨率

    在移动端Web开发的过程中,除了要使用<meta>标签设置理想视口之外,还需要解决移动端页面中图片的显示问题。图片的显示是否清晰,与屏幕分辨率、图像分辨率和设备像素比有关。

    分辨率分为屏幕分辨率图像分辨率

    屏幕分辨率是指一个屏幕上可以显示多少信息,通常以像素(px)为单位来衡量。在同一台设备上,图片的像素点和屏幕的像素点通常是一一对应的

    屏幕分辨率1920×1080表示水平方向含有1920个像素,垂直方向含有1080个像素,屏幕上总共有2 073 600个像素点

    • 在屏幕的大小相同的情况下,如果屏幕的分辨率低(如640×480),则屏幕上显示的像素少,单个像素点比较大,看起来会有种颗粒感
    • 在屏幕的大小相同的情况下,如果屏幕的分辨率高(如1920×1080),则屏幕上显示的像素多,单个像素点比较小,看起来会比较清晰

    图像分辨率500×200表示这张图片在屏幕上按1:1显示时,水平方向有500个像素点(色块),垂直方向有200个像素点(色块)

    • 图片的分辨率越低,图片越模糊。图片的分辨率越高,图片越清晰
    • 当图片放大时,图片在屏幕上显示的像素变大,软件通过算法对图像进行了像素补充
    • 当图片缩小时,也是通过算法将显示的图片像素进行减少

    2、设备像素比

    在传统的PC端和早期的普通手机中,屏幕上的一个像素和网页CSS中的一个像素是完全对应的。随着技术的进步,为了提高屏幕显示的细腻度,高分辨率的屏幕开始流行,一块屏幕可以显示更多的像素。随之产生了一个问题,就是同一个网页在不同分辨率的屏幕下显示效果会有大小差异,因为CSS中使用的像素是一个固定值,它不会因为屏幕分辨率而发生改变。

    在屏幕尺寸相同的情况下,一个12px的文字在低分辨率的屏幕中的尺寸很大,但在高分辨率的屏幕中尺寸很小。

    在分辨率非常高的屏幕中,文字会显得特别小,不利于浏览。

    在高分辨率屏幕中,CSS使用的像素单位和屏幕显示的像素并不是一对一的,将屏幕像素除以CSS像素得到的就是设备像素比。

    为了解决这个问题,高分辨率设备的操作系统会对网页画面进行缩放,让大小看上去比较舒适,而网页中使用的像素也不必修改。尤其是网页中的文字,在高分辨率屏幕下的显示效果会更加细腻。例如,当设备像素比为4时,CSS像素和屏幕像素的转换关系

    二倍图

    二倍图可以理解为当设备像素比很大时,图片会被放大,而放大会让图片看起来模糊。为此,我们可以使用二倍图的方式来提高图片的清晰度。

    当一个50px×50px(CSS像素)的图片直接放到iPhone 6/7/8设备中显示时,图片会被放大,长和宽都放大到原来的二倍(iPhone 6/7/8的设备像素比为2),即100px×100px。

    <body>
      <!-- 原图 -->
      <img src="images/50.png" alt="">
      <!-- 二倍图 -->
      <img src="images/100.png" alt="">
    </body>
    <style>
      img:nth-child(2) {
        width: 50px; 
        height: 50px; 
      }
    </style>
    

    物理像素&物理像素比:

    • 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8 是 750* 1334
    • 我们开发时候的1px 不是一定等于1个物理像素的
    • PC端页面,1个px 等于1个物理像素的,但是移动端就不尽相同
    • 一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比

    背景图片的缩放:

    除了使用<img>标签插入的图片,还会用到背景图片,所以背景图片也需要设置缩放效果。

    在CSS3中,提供了background-size属性用来规定背景图片的尺寸,从而达到背景图片的缩放效果。

    background-size设置的宽度和高度可以是像素或百分比。使用background-size的基本语法如下:

    background-size: 背景图片的宽度 背景图片的高度;

    除像素或百分比以外,background-size属性还可以用其他的属性值来实现不同的缩放效果,如表所示:
    在这里插入图片描述

    SVG矢量图

    网页中的图片可以分为两类,一类是小图标和简单的图形;另一类图片经常使用GIF、JPEG、PNG等格式,这些格式比较常见,但因为都是基于像素处理的,当放大时会失真,变得模糊。

    可缩放矢量图形(Scalable Vector Graphics,SVG)是一种开放标准的描述矢量图形的语言,它基于XML(可扩展标记语言)。在2003年1月,SVG 1.1被确立为W3C(万维网联盟)标准。

    在这里插入图片描述
    SVG使用标签的方式定义各种图形,外层标签是<svg>viewBox可以定义用来观察SVG视图的一个矩形区域,它的属性主要包括x、y、width、height,用数字表示,每个数字之间用空格或逗号隔开,表示定义一个在左上角(x, y)坐标位置,宽度为width,高度为height的矩形。常用属性如表所示:

    在这里插入图片描述
    <svg>标签的内部,可以使用SVG提供的一些预定义的标签来绘制图形,或者绘制文字,
    常用的内部标签如表所示:
    在这里插入图片描述

    SVG常用的内部标签还可以通过属性来设置样式,常用的属性如表所示:

    在这里插入图片描述

    <body>
      <svg width="100%" height="100%">
        <circle cx="100" cy="50" r="40" 
         stroke="black" stroke-width="2" fill="#ddd">
      </svg>
    </body>
    

    从外部引入SVG文件:

    <body>
      <img src="circle.svg" alt="">
    </body>
    

    定义circle.svg文件,并进行XML声明,其中standalone属性用来规定此SVG文档是“独立的”还是含有对外部文件的引用,此处设为no表示该SVG文档会引用一个外部文件(即第2行的DTD文件)。引用了外部的SVG的DTD文件,此处引用的是W3C提供的svg11.dtd,表示含有所有允许的SVG元素。

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    

    在circle.svg文件中添加代码,为<svg>标签添加了version(SVG版本)和xmlns(XML命名空间)属性,用来在XML文档中使用,并定义<circle>圆形。

    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#ddd" />
    </svg>
    
    展开全文
  • 移动端web开发笔记(一)

    万次阅读 多人点赞 2018-07-15 20:33:43
    先搞清楚两个概念,移动端web开发,web app开发1、 移动web开发(pc端的页面用手机浏览器打开)这部分跟web前端开发差别不大,使用的技术都是html+css+js。区别为手机浏览器是webkit的天下,pc端是IE的天 下。手机...

    我本来一直在开发PC端的网页的,但是看到很多招聘都要求要有移动端开发的经验,所以开始学习一下!

    先搞清楚两个概念,移动端web开发,web app开发

    1、 移动web开发(pc端的页面用手机浏览器打开)

    这部分跟web前端开发差别不大,使用的技术都是html+css+js。区别为手机浏览器是webkit的天下,pc端是IE的天 下。手机网页可以理解成pc网页的缩小版加一些触摸特性。因为是在浏览器中进行的网页开发,所有最终代码具有跨系统平台的特性

    2、 web app开发(web应用程序)

    特指的是用html5技术开发,之所以叫web app是因为他比较接近客户端应用程序的用户体验,可以和系统深度融合,调用一些只有客户端才能调用的功能(比如在移动设备上利用html5开发出的网页可以访问电话、摄像头等本地功能).

     

    一、meta标签

    html代码中最关键的就是meta标签设置,开发移动端页面首先一定要设置viewport (可视区域)

    device-width - 设备的宽度

    initial-scale - 初始的缩放比例 

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

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

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


    其次是一些辅助优化功能,常用的有如下meta标签:

     

    下面延伸一下<meta>标签的作用

    meta标签是元素可提供相关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部,不包含任何内容。

    meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能

    <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

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

     

    也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,例如加入关键字会自动被大型搜索网站自动搜集;可以设定页面格式及刷新等等。

     

    name属性

    主要有以下几种参数:

    (1)Keywords(关键字)

    说明:keywords用来告诉搜索引擎你网页的关键字是什么。提高网站的访问量

    举例:

    <meta name ="keywords"content="science,education,culture,politics,ecnomics,relationships,entertainment,human">

    (2)description(网站内容描述)

    说明:description用来告诉搜索引擎你的网站主要内容。

    网站内容描述(description)的设计要点:

    ①网页描述为自然语言而不是罗列关键词(与keywords设计正好相反);

    ②通常为网页内容的摘要信息,也就是希望搜索引擎在检索结果中展示的摘要信息;

    ③网页描述中含有有效关键词;

    ④网页描述内容与网页标题内容,主题内容有高度相关性;

    ⑤网页描述的文字不必太多,一般不超过搜索引擎检索结果摘要信息的最多字数(通常在100中文字之内,不同搜索引擎略有差异)。

    举例:<meta name="description" content="This page isabout the meaning of science,education,culture.">

    3robots(机器人向导)

    说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。

    content的参数有all,none,index,noindex,follow,nofollow。默认是all

    举例:<meta name="robots"content="none">

    4author(作者)

    说明:标注网页的作者

     

    http-equiv属性

    相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为contentcontent中的内容其实就是各个参数的变量值

    1content-Type(显示字符集的设定)

    说明:设定页面使用的字符集。

    用法:<meta http-equiv="content-Type"content="text/html; charset=gb2312">

    2content-Language当浏览者访问你的网页时,浏览器会自动识别并设置网页中的语言

    用法:<metahttp-equiv="Content-Language" content="zh-cn" />

    3Expires(期限)

    说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

    用法:<meta http-equiv="expires"content="Fri,12 Jan 2001 18:18:18 GMT">

    注意:必须使用GMT的时间格式。

    4Pragma(cache模式)

    说明:禁止浏览器从本地计算机的缓存中访问页面内容。

    用法:<meta http-equiv="Pragma"content="no-cache">

    注意:这样设定,访问者将无法脱机浏览。

    5Refresh(刷新)

    说明:自动刷新并转到新页面。

    用法:<meta http-equiv="Refresh" content="2;URL">;(注意后面的分号,分别在秒数的前面和网址的后面,URL可为空)

    注意:其中的2是指停留2秒钟后自动刷新到URL网址。

    6Set-Cookie(cookie设定)

    说明:如果网页过期,那么存盘的cookie将被删除。

    用法:<meta http-equiv="Set-Cookie"content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT;path=/">

    注意:必须使用GMT的时间格式。

    7Window-target(显示窗口的设定)

    说明:强制页面在当前窗口以独立页面显示。

    用法:<meta http-equiv="Window-target"content="_top">

    注意:用来防止别人在框架里调用自己的页面。

     

     



    展开全文
  • 最新移动端web开发总结

    千次阅读 2019-04-23 19:15:46
    1.前言 到目前为止,互联网行业里,手机越来越智能化,移动端...如何让我们所开发的手机页面能有更好的交互体验,就是这篇文章的主旨:移动web开发问题和优化小结。这个只是我自己在开发的时候知道的坑,如果大...

    1.前言

     

    到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这就要求我们产品质量越来越高,web前端开发而言是一个挑战,是一个难题,也是一个机遇。如何让我们所开发的手机页面能有更好的交互体验,就是这篇文章的主旨:移动web开发问题和优化小结。这个只是我自己在开发的时候知道的坑,如果大家有遇到什么别的坑,欢迎补充,或者觉得我哪里写错了,欢迎指点!

     

    2.Meta标签

     

    页面在手机上显示时,增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户通过点击或者缩放等操作对屏幕放大浏览。(这个在ios10以上的版本已经失效了,即使加了下面的meta,用户双击,缩放还是可以缩放页面。大家可以按照开发需求,参考下面的连接进行限制–ios10中禁止用户缩放页面)

     

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

     

    禁止ios上自动识别电话

     

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

     

    禁止android上自动识别邮箱

     

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

     

    下面两个是针对ios上的safari上地址栏和顶端样式条的(我的手机是安卓,这个没很仔细测试过,但是都有加上)

     

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

      <!-- 听说在ios7以上版本就没效果了 -->

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

      <!-- 可选default、black、black-translucent 但是我都是用black-->

     

    3.打电话发短信

     

    <a href="tel:020-11811922">打电话给:0755-10086</a>

    <a href="10086">发短信给: 10086</a>

     

    4.css3过渡动画开启硬件加速

     

    ps:网上有说这个用了,手机的耗电量也会增加。我自己也在手机上粗略试过,确实有那么一回事,平常看博客,5分钟左右少1%,用了硬件加速3分钟左右就少1%,大家注意合理使用。

     

    .translate3d{

       -webkit-transform: translate3d(0, 0, 0);

       -moz-transform: translate3d(0, 0, 0);

       -ms-transform: translate3d(0, 0, 0);

       transform: translate3d(0, 0, 0);

    }

     

    说到这里,也顺便说下动画或者过渡的两个建议:

    1.在手机上(其实PC也是一样)。CSS3动画或者过渡尽量使用transform和opacity来实现动画,不要使用left和top。

    2.动画和过渡能用css3解决的,就不要使用js。如果是复杂的动画可以使用css3+js(或者html5+css3+js)配合开发,效果只有想不到,没有做不到。

     

    5.移动端click屏幕产生200-300 ms的延迟响应

     

    click事件因为要等待确认是否是双击事件,会有300ms的延迟(两次点击事件间隔小于300ms就认为是双击),体验并不好。现在的解决方案,第一个就是采用touchstart或者touchend代替click。或者封装tap事件来代替click 事件,所谓的tap事件由touchstart事件+ touchmove(判断是否是滑动事件)+touchend事件封装组成。

     

    关于touch和鼠标事件的延迟说明,我引用叶小钗大神博客里面的一张图片,如下

     

     

    在手机上,click的延迟将近400ms。对于用户而言,是一个很严重的延迟了!所以在手机上,并不建议用click。

     

    附上叶小钗大神的原文–手持设备点击响应速度,鼠标事件与touch事件的那些事

     

    6.图片优化

     

    6-1.base64编码图片替换url图片

     

    这个应该没什么好解释的,就是能不发请求的就不要发,对于一些小图标(我这做法是把8K以下的图标都转换成base64)之类的,可以将图片用base64,来减少请求的发送。尤其是在移动端,请求显得特别珍贵,在网速的不好的情况下,请求就是珍贵中的珍贵。

     

    6-2.图片压缩

     

    对于整个网站来说,图片是最占流量的资源之一,能不使用就不适用,图标可是使用base64编码,字体图标代替,SVG等来代替,使用就要选择最合适的格式,合适的尺寸,然后压缩–这里推荐腾讯推出的智图。

     

    PS:过度压缩图片大小影响图片显示效果,可能会使得图片变得模糊,一般来说,品质在60左右就差不多了!

     

    6-3.图片懒加载

     

    首屏加载的快慢,直接影响用户的体验,建议将非首屏的图片资源放到用户需要时才加载。这样可以大大优化首屏加载,减少首屏加载所需要的时间!

    ps:懒加载要使用js频繁操作dom,期间会导致大量重绘渲染,影响性能。

     

    6-4.img还是background

     

    图片的展示方式有两种,一种是以图片标签显示,一种是以背景图片显示!下面写了这两者的区别。

     

    img:html中的标签img是网页结构的一部分会在加载结构的过程中和其他标签一起加载。

    background:以css背景图存在的图片background会等到结构加载完成(网页的内容全部显示以后)才开始加载

    也就是说,网页会先加载标签img的内容,再加载背景图片background引用的图片。引入一张图片,那么在这个图片加载完成之前,img后的内容不会显示。而用background来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,网页内容能正常浏览,但是看不到背景图片。至于这两种,大家按照习惯,需求等权重因素选择!

     

    7.快速回弹滚动

     

    在ios上,如果存在局部滚动,就要加这个属性了!如果不加,滚动会很慢,看起来也会有一卡一卡的感觉。

     

    -webkit-overflow-scrolling: touch;

     

    但是,加上了这个,在ios上会产生bug。

     

    如下布局

     

     

    .fb-box是一个大div,包含着页面上的所有元素,包括所看到的那个弹窗.dialog-img,并且设置了height:100%;-webkit-overflow-scrolling:touch;position:relative;

     

    定位需要,-webkit-overflow-scrolling:touch;也需要,但是这样设置,在ios上会有一个bug,页面滚动一定的距离后,点击了显示弹窗,再关闭的话,就会发现,弹窗的一部分还“留在页面上”。

     

     

    解决方案1:

     

    把弹窗的div和.fb-box以兄弟节点的方式布局,在外层再弄一个div包住,这个坑就算爬起来了,效果如下

     

     

     

    解决方案2:

    .fb-box去掉position:ralative;。让弹窗的div参考body定位!

     

    8.谨慎使用fixed

     

    ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位,会发生元素错位(滚动一下又恢复),有时候会出现闪屏的效果。我也搜过一下这个问题,发现别人还遇到了我没遇到过的问题!真是,哎~。所以在手机上,不建议用fixed定位,使用absolute代替!如果一定要用,写好了之后,一定要多测试几次!

     

    9.消除transition闪屏

     

    PS:这个问题,我近段时间开发,貌似不加上这个代码也没什么影响,但是以前就是要求加,就加上了,现在没加上,也没反馈有什么问题!

     

    .no-flash {

        -webkit-transform-style: preserve-3d;

        -webkit-backface-visibility: hidden;

        -webkit-perspective: 1000;

    }

     

    10.ios系统中去掉元素被触摸时产生的半透明灰色遮罩

     

    a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

     

    11.ios中去掉默认input默认样式

     

    input,button,textarea{-webkit-appearance: none;}

     

    12.左右滑动,避免页面跟着滑动

     

    这个细节是我在基于vue开发焦点图的时候遇到的,后来自己找不到方法,直接在sf上提问了,大家可以去参考下:移动端轮播图,上下滑动的时候不触发页面的滚动

     

    ps:滑动我没有使用什么库,是我根据touchstart和touchend的移动距离来判断是左右滑动或者上下滑动!

     

    13.vue-router与微信分享的问题

     

    分享发送的连接是下面这样

     

    http://www.example.com/dist/html#/index?utm_source=share

    http://www.example.com/dist/html#/index.html/index?utm_source=share

     

    但是分享之后的实际连接是下面这样的,别人点击的分享出去的链接,就会打不开网页

     

    http://www.example.com/dist/html?from=xxxx#/index&utm_source=share

    http://www.example.com/dist/html#/index.html?from=xxxx/index&utm_source=share    

     

    解决方案

     

    1.自定义分享URL地址

    2.避免使用单文件应用

     

    14.iphoneX的齐刘海

     

    苹果公司新出的手机,出了没多久,段子手就坐不住了,各种调侃,但是今天我们聊那个!聊下iphoneX给前端带来的困扰,也是给ui带来的困扰吧!下面引入大漠,张鑫旭等人对iphoneX齐刘海的一个解决方案!避免到时候跳坑!

     

    iPhone X的缺口和CSS(https://www.w3cplus.com/css/the-notch-and-css.html)

    借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海(http://www.zhangxinxu.com/wordpress/2017/09/css-shapes-outside-iphone-x-head/)

    剖析 iOS 11 网页适配问题(http://mp.weixin.qq.com/s/6YSN3g86jcU22xwcloNk3A)

    手机管家iPhoneX的适配总结(https://segmentfault.com/a/1190000011308923)

     

    15.其它参考

     

    上面所说都是遇到的具体问题,至于还有一些比较笼统的细节优化,或者开发遇到的问题,比如:压缩代码,图片,合并文件等。大家可以参考下面的资源,这些我不展开说了!

     

    1.web移动前端有哪些优化方案?

    2.web移动端页面性能优化方案

    3.Web前端优化最佳实践及工具集锦

    4.移动前端系列——移动页面性能优化

    5.Web性能优化:图片优化

     

    16.小结

     

    我在移动web(手机网站)上,遇到的问题,暂时就是上面这些了!肯定还是会有很多我没遇到过的问题,这些以后会记录,但是不一定会以文章方式发表。如果大家在开发移动网站的时候,有遇到过什么大大小小的问题,在评论或者自己以文章方式提醒!方便让以后的避免踩坑!最后,如果大家有什么补充或者觉得我哪里写得不好,写错了!欢迎指点!

    这里还是要推荐下小编的web前端学习 群 : 569146385,不管你是小白还是大牛,小编我都欢迎,不定期分享干货,包括 小编自己整理的一份最新的web前端资料和0基础入门教程,欢迎初学和进 阶中的小伙伴。在不忙的时间我会给大家解惑。

    展开全文
  • 从零开始学习移动端Web开发

    万次阅读 多人点赞 2017-05-11 13:19:57
    从传统的安卓、IOS原生手机系统应用开发,转向了移动端Web开发或者是混合开发,既然有需求,那就让我们一起来学习移动端Web开发吧。本文旨在让读者以最快的时间了解移动Web开发基础以及介绍一些常见问题。基础准备...
  • 移动端web开发调试.pdf

    2021-08-21 13:40:44
    移动端web开发调试.pdf
  • HTML5是移动端开发最常用的技术,熟悉HTML5新标签和Api以及CSS3的新的Api,可以使你的网页更加的绚丽多彩,并且开发出你意想不到的网页效果。学完此课程,你编写的代码就可以在移动设备上完美兼容啦。
  • 移动端web开发调试.zip

    2021-10-25 19:41:03
    移动端web开发调试
  • 移动端WEB开发之响应式布局 目 响应式开发 C Bootstrap前端开发框架 o n Bootstrap栅格系统 t e 阿里百秀首页案 n t s 1. 响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置...
  • 移动端web开发技巧

    2015-12-08 16:32:31
    本文档为移动端web开发技巧,在使用html5进行移动端开发的时候需要注意的一些问题。
  • IOS输入框和按钮自带圆角问题 在css中输入框和按钮并没有设置圆角但在ios中却默认有圆角效果 解决 我是一个按钮 /> <input type=text class=ele-input /> [type=button], [type=submit], .ele-input{ -webkit-...
  • 1移动端布局与PC端布局的区别2移动端布局基本概念3移动端布局步骤4移动端布局常见问题
  • 移动端开发方案 单独移动端页面(主流) 通常情况下,网址域名前面加 m(mobile) 可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。 比如:京东商城手机版、淘宝触屏版、苏宁易购手机版 ...
  • 移动端WEB开发

    2021-02-05 14:13:28
    移动端WEB开发 移动端得基础 移动端浏览器我们主要对webkit内核进行兼容 我们现在开发的移动端主要是针对手机开发 现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一 用谷歌浏览器模拟手机页面以及调试 视口...
  • 移动端web开发---Touch事件详解

    万次阅读 多人点赞 2017-05-30 10:09:40
    二、移动端事件简介2.1 pc端事件在移动端的问题​ 移动设备主要特点是不配备鼠标,键盘也只是在需要输入的地方才会激活虚拟机键盘。所以以前的pc端事件在移动端使用起来就没有以前那么爽了,虽然部分仍然可以使用。 ...
  • 移动端web开发:局部区域滚动

    千次阅读 2018-06-01 11:24:03
    要实现多个div水平排列,并且自动出现横向滚动条。本来以为只需父级ul元素的overflow-x:auto;overflow-y:hidden,子级li浮动显示,即可以实现。结果测试发现结果并非想象的那样,浮动的子级li在溢出父级ul后,它会...
  • D2-淘宝移动端Web开发实践
  • 打造最好的移动端UI框架,适用于基于H5+的移动app开发并完美兼容移动端web开发
  • 移动端web开发布局简单介绍(一)之移动端基础 1.0移动端基础 随着技术的发展,现在Web前端行业需要掌握的技能越多,移动端的兴起。这里就简单介绍介绍关于移动端Web开发的几个布局。 1.1当前浏览器现状 PC端常见...
  • ###移动端web开发中,滚动事件对象通常是window,但在ios下,这一事件会引起绝对定位元素(顶部栏、底部栏)失效,即:当滚动到页面的上下边缘时,绝对定位元素会随touchmove事件发生偏移。 ###解决ios下这一缺陷的...
  • 移动端web开发初探之Vuejs的简单实战

    万次阅读 2018-01-14 17:34:27
    因此实际上就是在做移动端web开发了。 在这过程中遇到了不少有意思的东西。DEMO的github地址在这里内容提要:meta标签Vuejs的简单实战CSS移动端全屏背景CSS移动端动画初探meta标签 这点与在PC端写前端有着很大...
  • 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全...
  • 移动端web开发,现在普遍被成为h5开发,这个称谓其实不恰当,不过h5,说起来方便,那就h5吧。虽然都是web开发,区别还是挺多的~以下是po主的总结 布局 pc上,定宽的网站占大多数。而移动端布局绝大部分...
  • 转载请注明出处: freshlover的CSDN专栏文章《移动端Web开发调试之Chrome远程调试(Remote Debugging)》 http://blog.csdn.net/freshlover/article/details/42528643 参考文章:Remote Debugging on Androidwith...
  • web移动端开发

    2017-12-29 13:51:36
    1、大漠的移动端重构系列 点击打开链接 2、

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,962
精华内容 25,584
关键字:

移动端web开发