精华内容
下载资源
问答
  • web适配手机端开发总结

    千次阅读 2018-03-16 16:30:13
    现在手机端也业务要多于pc端,如何做手机端web页面也了许多web前端工程师的必修课,以下是我总结的一些心得,大家茶余饭后研读一下,看看能不能涨涨姿势。 适配手机端我主要总结3点: 1. 在页面顶部加meta,它...

    现在手机端也业务要多于pc端,如何做手机端的web页面也成了许多web前端工程师的必修课,以下是我总结的一些心得,大家茶余饭后研读一下,看看能不能涨涨姿势。

    适配手机端我主要总结3点:

    1. 在页面顶部加meta,它的大概意思就是让页面1:1显示,用户禁止缩放,加载html页面的head中  代码如下。

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

     

    2.布局用百分比/rem,这个就不多解释了,只是把原来的px换成%或rem,尝试一下就知道了。值得一提的是rem这个单位直接用不太好,因为你要精确到小数点后面三四位,所以大家要用的话,百度一下rem.js,网上有很多版本,自己下载一个src引入,这样就不用精确到小数点好几位了。

    div{
        width:80%,
        height:200px;
        font-size:1rem
    }

    3.框架推荐:uniapp或taro

    uniapp:可以自行百度一下,一套代码同时可以编译八端,天生适合移动端开发,其自带rpx可以让开发者通过rpx布局。

    taro:是京东推出的跨平台框架,它可以编译成RN、H5等,它使用react开发,也是移动端开发的首选。

     

    展开全文
  • 手机端网页web开发要点

    千次阅读 2016-03-29 16:53:59
    如无特殊需求,手机端无需定义中文字体,使用系统默认 英文字体和数字字体可使用 Helvetica ,三种系统都支持 /* 移动端定义字体的代码 */ body { font-family : Helvetica ;} 大多数手机不支持的: ...

    头部必须要加的

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

      <meta name="viewportcontent="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

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

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

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

    3、移动web页面自动探测电话号码

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

    <meta http-equiv="x-rim-auto-match" content="none">

    结论

    • 各个手机系统有自己的默认字体,且都不支持微软雅黑
    • 如无特殊需求,手机端无需定义中文字体,使用系统默认
    • 英文字体和数字字体可使用 Helvetica ,三种系统都支持
    /* 移动端定义字体的代码 */
    body{font-family:Helvetica;}

    大多数手机不支持的:

    • 表单元素的“disable”属性

    部分手机不支持的:

    • “button”标签
    • “input[type=file]“标签
    • “iframe”标签。

    虽然只有部分手机不支持这几个标签,但因为这些标签在页面中往往具有非常重要的功能,所以属于高危标签,要谨慎使用。

    少数手机不支持的:

    • “select”标签:该标签如果被赋予比较复杂的CSS属性,可能会导致显示不正常,比如”vertical-align:middle”。

    大部分手机不支持的:

    • “font-family”属性:因为手机基本上只安装了宋体这一种中文字体;
    • “font-family:bold;”:对中文字符无效,但一般对英文字符是有效的;
    • “font-style: italic;”:同上;
    • “font-size”属性:比如12px的中文和14px的中文看起来一样大,当字符大小为18px的时候你也许能看出来一些区别;
    • “white-space/word-wrap”属性:无法设置强制换行,所以当你网页有很多中文的时候,需要特别关注不要让过多连写的英文字符撑开页面;
    • “background-position”属性:但背景图片的其他属性设定是支持的;
    • “position”属性;
    • “overflow”属性;
    • “display”属性;
    • “min-height”和”min-weidth”属性;

    部分手机不支持的:

    • “height”属性:对”height”的支持不太好,奇怪的是在我们的测试当中,仅仅只有很少部分手机不支持”width”属性;
    • “pading”属性
    • “margin”属性:更高比例的手机不支持”margin”的负值。

    少数手机不支持的:

    • 少数手机对CSS完全不支持;

    其他

    • 部分手机不支持png8和png24,所以尽量使用jpg和gif的图片
    • 另外对于平滑的渐变等精细的图片细节,部分手机的色彩支持度并不能达到要求,所以慎用有平滑渐变的bar设计
    • 部分手机对于超大图片,既不进行缩放,也不显示横下滚动条
    • 少数手机在打开超过20k的测试页面时,会显示内存不足
    • 手机网页编码需要遵循什么规范? 遵循XHTML Mobile Profile规范,简称为XHTML MP,也就是通常说的WAP2.0规范。 XHTMLMP是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础,加入了一些来自XHTML 1.0的元素和属性。这些内容包括一些其他元素和对内部样式表的支持。和XHTML Basic相同,XHTML MP是严格的XHTML 1.0子集。
    • 网页文档推荐使用扩展名? 推荐命名为xhtml,按WAP2.0的规范标准写成html/htm等也是可以的。但少数手机对html支持的不好。
    • 为什么现今大多数的网站一行字数上限为14个中文字符? 由于手持设备的特殊性,其页面中实际文字大小未必是我们在CSS中设定的文字大小,尤其是在第三方浏览器中。例如Nokia5310,其内置浏览器 页面内文字大小与CSS设定相符,但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试,其文本大概在16px左右。 假如屏幕分辨率宽度为240px,去除外边距,那么其一行显示14个字以内,是比较保险(避免文本换行)的做法。
    • 使用WCSS还是CSS? WCSS (WAP Cascading Style Sheet 或称 WAP CSS)是移动版本的CSS样式表。它是CSS2的一个子集,去掉了一些不适于移动互联网特性的属性,并加入一些具有WAP特性的扩展(如-wap-input-format/-wap-input-required/display:-wap-marquee等)。 需要留意的是,这些特殊的属性扩展并不是很实用,所以在实际的项目开发当中,不推荐使用WCSS特有的属性。
    • 避免空值属性 如果属性值为空,在web页面中是完全没有问题的,但是在大部分手机网页上会报错。
    • 网页大小限制 建议低版本页面不超过15k,高版本页面不超过60k。
    • 用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱? 有条件的话,我们当然建议在手机实体上进行测试,因为目标客户群的手机设备总是在不断变化的,这些手机模拟器通常不能完全正确的模拟页面在手机上的显示情况,比如图片色彩,页面大小限制等就很难再模拟器上测试出来。当然,一些第三方手机浏览器的在线模拟器还是可以进行测试的,第三方浏览器相对来说受手机设备的影响较小。

    展开全文
  • 请问像CSDN这样的网页如何做到手机端访问和PC端访问是两种样式的?
  • 产品:关于手机移动端的租房网站 角色:在这个产品中用户包括房东与房客 功能:房东可以在这个平台发布自己的房屋,房客可以在这个平台寻找自己想要租的房子(类似短租平台) 设计模式:使用前后分离进行项目开发...

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家!

    项目源码下载

    一丶项目介绍

    • 产品:关于手机移动端的租房网站
    • 角色:在这个产品中用户包括房东与房客
    • 功能:房东可以在这个平台发布自己的房屋,房客可以在这个平台寻找自己想要租的房子(类似短租平台)
    • 设计模式:使用前后端分离进行项目开发(后端不再控制前端的效果展示)

    前端效果展示

    二丶前后端分离

    • 前后端分离的认识
    • 叙述:用户直接在浏览器中输入网址,不再是后端对应的动态逻辑了,而是一个静态页面
      从/index 变成了 index.html文本文件,对于静态资源就从提供静态资源服务器中去拿(nginx) 
      前端页面中对于数据这块的需求必定是从后端拿去数据,后端也不需要去渲染模板,直接将前端
      需要的数据转换成json格式字符串返回给前端即可(通过jquery以及其他前端框架去将数据渲染到页面)
      具体做成什么效果,跟后端没有什么关系,前端什么时候需要数据,后端就给数据,这就是前后端分离。
    • 优点:无论对于手机上的浏览器还是app程序向后端拿数据时,只要在后端已经定义好了接口,这个接口都是可以直接用的,体现出后端接口的复用性。
    • 流程:用户在浏览器中输入网址的时候,需要向后端(nginx)去要网页,在这个网页中没有任何的数据,只是普通的前端呈现的样式而已,在这个网页当中的js里面,通过ajax方式向后端接口要取数据,后端接口当中给前端返回的是json字符串,前端拿到这个字符串在到ajax回调函数中,通过jquery方式把数据填充到页面上。
    • 缺点:对于搜索引擎优化SEO不友好,无法将网页的数据通过搜索引擎搜索关键字查询此网页信息,爬虫拿取页面信息,并没有任何数据,导致在搜索引擎上排名无法靠前

    三丶项目需求

    需求功能

    1. 主页
        1.1 最多5个房屋logo图片展示,点击可跳转至房屋详情页面
        1.2 提供登陆/注册入口,登陆后显示用户名,点击可跳转至个人中心
        1.3 用户可以选择城区、入住时间、离开时间等条件进行搜索
        1.4 城区的区域信息需动态加载

    2. 注册
        2.1 用户账号默认为手机号
        2.2 图片验证码正确后才能发送短信验证码
        2.3 短信验证码每60秒可发送一次
        2.4 每个条件出错时有相应错误提示

    3. 登陆
        3.1 用手机号与密码登陆
        3.2 错误时有相应提示

    4. 房屋列表页
        4.1 可根据入住离开时间、区域进行筛选,并可进行排序
        4.2 房屋信息分页加载
        4.3 区域信息动态加载
        4.4 筛选条件更新后,页面立即刷新

    5. 房屋详情页
        5.1 需展示的详细信息参考设计图
        5.2 提供预定入口
        5.3 若是房东本人查看房屋信息时,预定入口不显示

    6. 房屋预定
        6.1 由用户确定入住时间
        6.2 根据用户确定的入住离开时间实时显示合计天数与总金额

    7. 我的爱家
        7.1 显示个人头像、手机号、用户名(用户名未设置时为用户手机号)
        7.2 提供修改个人信息的入口
        7.3 提供作为房客下单的查询入口
        7.4 提供成为房东所需实名认证的入口
        7.5 提供作为房东发布房屋信息的入口
        7.6 提供作为房东查询客户订单的入口
        7.7 提供退出的入口

    8. 个人信息修改
        8.1 可以修改个人头像
        8.2 可以修改用户名
        8.3 登陆手机号不能修改
        8.4 上传头像与用户名分开保存
        8.5 上传新头像后页面理解显示新头像

    9. 我的订单(房客)
        9.1 按时间倒序显示订单信息
        9.2 订单完成后提供评价功能
        9.3 已评价的订单能看到评价信息
        9.4 被拒绝的订单能看到拒单原因

    10. 实名认证
        10.1 实名认证只可进行一次
        10.2 提交认证信息后再次进入只能查看信息,不能修改
        10.3 认证信息包含姓名与身份证号

    11. 我的房源
        11.1 未实名认证的用户不能发布新房源信息,需引导到实名认证页面
        11.2 按时间倒序显示已经发布的房屋信息
        11.3 点击房屋可以进入详情页面
        11.4 对实名认证的用户提供发布新房屋的入口

    12. 发布新房源
        12.1 需要用户填写全部房屋信息
        12.2 房屋的文字信息与图片分开操作

    13. 客户订单(房东)
        13.1 按时间倒序显示用户下的订单
        13.2 对于新订单提供接单与拒单的功能
        13.3 拒单必须填写拒单原因
        13.4 若客户进行了订单评价,需显示

    14. 退出
        14.1 提供退出功能
     

    展开全文
  • 经历过电脑端网页开发的朋友,在第一进行手机端开发时候,总感觉一头雾水,我也一样,将自己近期来在手机端开发中的问题与解决方法分享,如有不对或更好的方法,请指正。1.如何让网页在手机端正常显示?而是pc端网页...

    经历过电脑端网页开发的朋友,在第一进行手机端开发时候,总感觉一头雾水,我也一样,将自己近期来在手机端开发中的问题与解决方法分享,如有不对或更好的方法,请指正。

    1.如何让网页在手机端正常显示?而是pc端网页的缩小版

    说起来可能有点不生动,用图例说明一下。

    这里写图片描述

    如上图,这次可能更醒目了,这个问题导致我们不能正常的取编写手机端的网页代码,这个时候我们就有了解决方法。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta http-equiv="content-Type" content="text/html;charset=UTF-8" >
        <meta name="apple-touch-fullscreen" content="YES" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, draggable=no,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="format-detection" content="telephone=no" />
    </head>
    <body>
    </body>
    </html>

    我们只需要在头部添加上面的代码,问题就得以解决。至于代码的详细解释,网上有更详细的解释,聪明的大家相信会懂得,我就不罗嗦了。

    2. 如何让手机端网页适配更多的手机?

    手机的分辨率问题是手机端开发中的一个大问题,在这里大家一定要区分手机端物理像素和真实像素的区别,根据开发经验,我觉得主流手机物理像素在300-500px之间。但在实际开发中,我们往往是用百分比来布局的,因为手机的分别率是未知的,这个时候我们就可以用百分比轻松搞定好多问题,也就是这样:

        .content{
            width: 100%;
            height: 80px;
        }

    具体的情况还得看实际开发需求。

    3.由于手机的性能远远比不上pc,这个时候图片等等一些因素就影响了手机的性能,如何优化呢?

    其实不用担心,因为是手机,所以我们可以用HTML5 + CSS3进行开发。这个时候推荐大家一种东西,叫做字体图标iconfont ,我们可以在这里找到我们需要的图片阿里矢量图;但是我们又会发现一个问题,如果我们图片过多了怎么办,多个图片是不利于我们开发的,多个名字,也不利于维护。于是出现了更好的方法。字体图标。

    这个轻量级的,而且不会失真的图片,关键是挺美观,是不是很~(≧▽≦)/~。

    用css将他引进来

    @font-face {
        font-family: 'iconfont';
        src: url('../../iconfont/menu/iconfont.eot'); /* IE9*/
        src: url('../../iconfont/menu/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../../iconfont/menu/iconfont.woff') format('woff'), /* chrome、firefox */
        url('../../iconfont/menu/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('../../iconfont/menu/iconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */
    }
    .iconfont{
        font-family: "iconfont";
        font-style: normal;
        color: #fff;
    }

    然后html代码中运用就行了

    <i class="iconfont">&#xe61f;</i>

    于是就出现了美丽的图标,关键是一次引用,多次调用哦。好多图片的问题一下集中解决。

    似乎没了,有了新的总结在更新吧……

    展开全文
  • 如何限制电脑PC端访问Web页面,只能手机端才能访问开发中遇到什么学习什么: 现在就需要一个链接 电脑不能访问,只有手机端才可以 其实没有你想象的难,一个js就搞定了 不说了上代码在手机端浏览的页面上加个js: ...
  • 手机端web开发,有些人说session机制不好用(甚至不能用),改用自己封装的一套 token机制(其实跟session机制差不多,token相当于sessionid,然后用token当 key,把要存的用户的会话信息当做与token这个key对应的...
  • 手机端网页开发集锦

    2016-10-26 16:55:13
    1,css媒体查询、 ...<meta content="telephone=no" name="format-detection">//禁止数字自动识别为电话号码,这个比较有用,因为一串数字在iphone上会显示蓝色,样式加成别的颜色也是不生效的。
  • 自己实现的手机端web开发,是一个小小的数学游戏程序,可自己改编,能够自适应手机屏幕,有用到jquery.mobile插件。
  • 移动端手机端web页面

    2016-09-12 15:53:26
    根据一个网站页面自己仿写的手机端页面,移动端响应式布局
  • 1、手机端web端任何一方发送消息,另外一方也能收到消息 2、手机端web端任何一方读取某消息,另外一方也能收到该消息已读 3、手机端web端只要在线就能够实时接收到消息,不在线登录后能够接收到未读消息 4...
  • 说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! ... 目录 一丶创建项目 二丶创建工程目录(拆分...三丶以开发环境进行项目测试 一丶创建项目 1 新建ihome_python项目文件夹 2 在Pych...
  • PC端web手机端web跳转的方式

    千次阅读 2015-12-04 15:49:30
     webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部   };   }(),   language:(navigator.browserLanguage || navigator.language).toLowerCase()   }; /**  * 判断浏...
  • 一个正常的网站包括软件等,都会有日志来记录历史操作信息等,在公司中一般会将存放日志目录与工程目录隔离开,这里为了方便演示,即将日志目录和工程目录放到一起,在项目根目录创建logs目录,用来存放日志文件 ...
  • 版本升级。用户角度上看,客户端升级必须...而web只需要修改后台的某些文件,然后传到自己的服务器,用多快速的迭代开发方式都没问题。web没有版本兼容性问题,客户端这个问题就大了。 iOS客户端用编译语言,web用脚本
  • HTML5手机端网站开发meta设置

    千次阅读 2018-04-27 11:18:03
    前端在进行手机端页面开发时,需要在页面head中完成很多基本设置,确保页面在手机端的显示效果。在开发的过程中,是通过meta标签的设置。1.viewport标签&lt;meta name="viewport" content="width...
  • 分析:前后不分离时跟django一样直接在模板中进行设置csrf,而我们这个项目使用的是前后分离,没有模板,对于cookie我们可以提前进行设置csrf_token,然后对于请求体中的cookie而言,当 发送POST请求时,就将那...
  • 手机web 开发

    2014-03-18 17:25:37
    如果是手机web开发,应该在head之间添加一个: 进行屏幕的适配。基于iphone自带浏览器的内核不是IE,是webkti,所以我建议在编写的css的时候不要用position:relative,...判断是手机还是电脑浏览器登入网站
  • 我做的web app,相当于手机端网页,可以直接用微信授权登录吗?如果可以怎么实现呢,给个思路好嘛
  • HTML5手机端网页开发

    千次阅读 2017-08-17 15:48:37
    --> 仿真交易移动端 href="js/alert/SyntaxHighlighter/shCoreDefault.css"> ... //2016.3.23 wjq update 之所以要加个判断返回一个20.5,是因为当用户在谷歌等浏览器直接输入手机端
  • 短信验证码这一块,大多网站都会在用户发送第一次验证码后,在前端页面会出现60s后再试之类的提醒,那么对于后端来说,也是需要的,比如被人知道了后我端口的接口,1分钟之类不断的发送短信,那可就不好了,所以为了...
  • 在线学习平台移动Web客户端 ...1,PC Web端 2,Flutter 说明 如果对您有帮助,您可以点右上角“ Star”支持一下谢谢!^ _ ^ 开发环境为Windows10 1909 Chrome79 Nodejs 13.7.0 效果演示 (请用chrome手机模式预览)
  • 1.手机端web页面使用的事件有哪些,还能不能使用click事件了? 2.如何让网页页面最小480px;小于480px时浏览器就不能继续缩小了?
  • 移动端WEB网页开发之开发资源准备,对于微信公众号网页,手机端wap页面, h5页面(含vue,react,angular)单页应用,小程序、app等的webview页面等都适用。
  •  作为软件开发者,自己开发软件的同时也在使用别人开发的软件,通常使用的软件分为两类:协同办公类软件和开发类软件。同时,不同公司有自己的开发流程,相应的开发工具有所不同,但作为开发者本身而言,需要学习...
  • 手机web开发资料

    2009-05-14 19:32:00
    3G牌照发了,近期要开始仔细研究手机端web开发了,在网上找了找资料,中文的真不是一般的少,简直就是没有,唉,还是看E文的吧。把找到的网站整理一下,以便查找。1. http://www.openmobilealliance.org/ OMA,Wap...
  • 不多介绍,以下内容直接 copy 了项目的 README.md简介vConsole 是一个网页前端调试面板,专为手机 web 页面量身设计,帮助开发者更为便捷地进行开发调试工作。手机预览...
  • web前端技术开发PC程序

    千次阅读 2017-10-17 14:54:14
    用 Chromium&Webkit 来呈现 web 页面,是客户端里面嵌浏览器,浏览器里面跑网页。 https://bitbucket.org/chromiumembedded/cef/ http://blog.csdn.net/mfcing/article/details/43953433 http://ww
  • 各位亲,求海康威视视频监控网络硬盘录像机NVR设备接入网页手机端如何进行二次开发,实现视频实时显示功能(控制、配置功能不需要)。 或者进行合作开发

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,099
精华内容 21,239
关键字:

web网页开发成手机端