精华内容
下载资源
问答
  • PC端网页适配手机端网页

    千次阅读 2019-05-24 18:17:04
    PC端网页适配手机端网页
     <meta name="viewport" content="width=720,initial-scale=0.5, minimum-scale=0.1, maximum-scale=1.0, user-scalable=yes"/>
    

    加上这句话就对了,希望能留下你的赞!!

    展开全文
  • 用webbrowser可以模拟pc端访问网页,但是如何实现模拟手机端访问网页呢,因为手机和pc端的内容不一样。
  • 网页自动适应手机端

    千次阅读 2017-11-10 11:09:32
    判断是否为手机端 if (window.navigator.userAgent.toLowerCase().indexOf('mobile') == -1) {//-1 为PC端 1为移动端 } 贴出代码 复制过去吧 网站对移动设备友好,确保适当的绘制和触屏缩放: <meta name=...

    网站对移动设备友好,确保适当的绘制和触屏缩放:

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

    可以自适应手机宽度。

    其中:
    width=device-width :表示宽度是设备屏幕的宽度

    initial-scale=1.0:表示初始的缩放比例

    minimum-scale=0.5:表示最小的缩放比例

    maximum-scale=2.0:表示最大的缩放比例

    user-scalable=yes:表示用户是否可以调整缩放比例

     

    如果只是写手机端页面 可以不用加。但是宽度必须按照百分比写。不加的话字体一般要30px才看的清楚,加了的话就是正常的12px如果是网页自动适应手机端就一定要加。最外层的div宽度设为百分百。以后再根据需要排版,可以用px或者百分比但是页面一般是用px 浏览器换成手机模式开发。和书写普通网页一样没有区别换成手机模式网页会自适应。宽度单位为px。

     

    1.  <meta name="format-detection" content="telephone=no">  
    2. <meta http-equiv="x-rim-auto-match" content="none">  
    3.     <!--自动将网页中的电话号码显示为拨号的超链接-->  
    4. <a href="tel:110">报警!</a>

     

    向浏览器声明该网页为移动设备自适应网页的meta标签为(如果是想要一打开网页,则自动以原始比例显示,并且不允许用户拖动和放大缩小的话):

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

    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    这段话需直接写在title标签上面,引入样式地址写在title后面 不然先引用样式表这句话就无效了

    (1)、主要I是强制让文档的宽度与设备宽度保持1:1,最大宽度1.0,禁止屏幕缩放。

    (2)、iphone的私有标签,iphone顶端状态条的样式。

    (3)、这个也是iphone私有标签,允许全屏浏览。

    (4)、禁止数字自动识别为电话号码,这个比较有用,因为一串数字在iphone上会显示成蓝色,样式加成别的颜色也是不生效的。

    <meta name="format-detection" content="telephone=no,email=no">   电话,邮箱 两个一起写

    3、去除Android自动识别邮箱地址

    安卓有邮箱自动识别功能,而苹果却没有。想去除邮箱识别功能,那就在head中加入一个meta标签。

    展开全文
  • 最近帮老师改个网站,将PC端网页改为手机端网页,虽然对于有一定开发经验的前端开发者是很easy的事情,但是呢,对于小白来说,还是很一头雾水的。下面咱们就从头来进行实战,看看自适应到手机端到底是怎么回事! ...

    最近帮老师改个网站,将PC端网页改为手机端网页,虽然对于有一定开发经验的前端开发者是很easy的事情,但是呢,对于小白来说,还是很一头雾水的。下面咱们就从头来进行实战,看看自适应到手机端到底是怎么回事!

    开发必备工具:
    chrome浏览器
    一部手机
    CSS手册(推荐菜鸟教程-CSS手册

    好了,咱们开始吧!

    1、首先我先在电脑上打开网页
    在这里插入图片描述

    2、接下来使用chrome浏览器自带的手机模拟器看看这个网页在手机上显示的效果。(按F12或者点击浏览器右上角三个小点-》更多工具-》开发者工具)
    在这里插入图片描述
    点击这个红框,就会显示模拟手机的样子
    在这里插入图片描述
    第一个是可以选择手机类型,第二个可以调整手机的宽度和高度,第三个可以选择放大缩小比例。

    好了,如果你拿着手机这样看网页,是不是很不舒服,进行操作也十分难受。

    3、自适应第一步,添加meta

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

    这是个什么意思呢,通俗将就是等比例缩小了,按照你设备的宽度。
    下面是一些具体的参数和意义(刚入门不用记太多)

    width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width
    为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。 height:和 width 相对应,指定高度。
    initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
    maximum-scale:允许用户缩放到的最大比例。 minimum-scale:允许用户缩放到的最小比例。
    user-scalable:用户是否可以手动缩放。

    咱们看看加入这段代码(对了,把这段代码加入到head后面),页面出现了什么变化
    在这里插入图片描述
    这样看起来是不是比之前看着舒服多了。我在真实的手机上跑一下,看看是什么效果
    在这里插入图片描述
    大家可以看到,右边有一部分缺失,需要向左滑动才行。这是肯定不行的,咱们的最终目标是将这个登录页面显示在手机的中心。

    4、修改CSS样式

    上面这个问题,我可以通过添加css样式解决,但是你想呀,直接 添加css样式,你在手机上显示可以了,但是在PC端的样式是不是也给修改了,咱们自适应的前提之一就是不改变PC端网页的样式。这时候,需要咱们第二段神奇的代码:

    @media screen and (max-width: 720px) {
    
    }
    

    这个就是css中的媒体查询,max-width 意思为 当前页面的最大宽度 满足这个条件,就会执行这里面的代码。咱们将需要修改的CSS放入这里面,上面提到的这个问题岂不是迎刃而解了。
    具体点击:CSS媒体查询

    ok,咱们就写入一些代码,看看显示的结果
    在这里插入图片描述
    嗯嗯,看着不错! 嗯?等等,不对,我发现我写的css失效了,怎么可能呢?

    body{width: 90%; padding: 0px; margin:0px; min-width:350px;}
    

    在这里插入图片描述
    我发现我给body写的css并没有起作用。原因是优先级的问题。
    在这里插入图片描述
    的确如此,和浏览器中显示的一样。
    具体优先级问题点击查看:CSS优先级
    简单来说,写在body 上方style标签内的优先级要低于 标签内的。也就是它的优先级比我高,我写的就不显示了。

    也就是

    <style type="text/css">
    优先级小
    <style>
    
    <p style=" 优先级大"></p>
    

    我之前提过,写自适应尤其是给别人写自适应,一定尽可能不要动原来写的东西。这时候,咱们只需要通过添加!important 就可以使其优先级最高。

    body{width: 90%!important; padding: 0px!important; margin:0px!important; min-width:350px!important;}
    

    看看效果:
    在这里插入图片描述
    这次是真的不错了,大体到这里就完事了。当然还可以有更细致的改进,这里就不提了。

    最后说一下如何使用手机测试网页:
    首先你得有一个本地服务器,我使用的是php的,在电脑上访问地址是
    http://127.0,0.1/test/index.php

    你需要把127.0.0.1 换成你电脑的ip地址
    具体:win+R-》cmd-》输入ipconfig
    找到ipv4的地址就可以,有的显示出来两个 这两个都可以

    如有疑问,欢迎大家底部留言。

    展开全文
  • 解决手机端网页缩放问题

    千次阅读 2018-12-15 22:56:35
    解决手机端网页缩放问题 这个申明是移动设备用的,1:1显示设备屏幕大小,禁止缩放 加到网页文件&lt; head &gt; 标签中 &lt;meta name="viewport" content="initial-scale=1, maximum-...

    解决手机端网页缩放问题

    这个申明是移动设备用的,1:1显示设备屏幕大小,禁止缩放
    加到网页文件< head > 标签中

    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    
    展开全文
  • 电脑网页的设计尺寸 对大于30W台客户端用户...Window XP常见分辨率1024×768下我们除掉任务栏,浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是584。 Window 7常见分辨率1440×900下我们除掉任务栏,浏览
  • 手机端/网页 嵌套百度地图

    万次阅读 2015-05-21 11:27:24
    网页嵌套几步到位: ... 输入你想要定位的地点,添加标注,获取代码,拷贝到自己网页中即可。...但是体积大,在手机端很卡。 手机端效果图: 手机端嵌套: 代码如下: 在线地图       // 百度地图API功能 v
  • 手机端网页处理手机返回键

    千次阅读 2018-06-23 10:44:28
    // 手机端网页: 处理手机返回键 window.onpopstate = function (event) { // 监听到已经按下返回键,获取URL var url = "" + document.location + ""; var returnDialog = dialog({ width...
  • 手机端网页-微信授权登录

    万次阅读 2017-12-18 17:32:48
    近期有一个M站微信登录需求,了解了下微信网页授权登录功能: 参考文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842 1、创建j2ee项目:weixinAuth 2、增加引入jar文件。 注意:jar包的...
  • 手机端网页通过websocket通信

    千次阅读 2017-04-29 18:13:47
    手机端网页通讯,使用websocket完成二者之间的联通。websocket选用socket.io类实现。服务器端,使用nodejs,代码依赖了express和socket.io。首先建立一个http服务器var app = require('express')();var server = ...
  • 利用pdf.js在手机端网页中直接打开PDF文档

    万次阅读 热门讨论 2016-07-27 15:00:27
    项目中用到了需要在手机端直接打开PDF文档的情况,借鉴网友们的意见使用了pdf.js,测试了一下简单好用,下面是使用例子 {$neirong.title} body , html{ background-color: #404040; height: ...
  • html+css手机端自适应网页

    万次阅读 多人点赞 2018-08-10 09:47:41
    一,最近做项目,写移动端的网页,主要是自适应的问题。bootstrap等前端框架用的不好,又不想耽误时间,不能自适应很烦人,这里给大家介绍下我的方法, 也是结合了很多人的思路。 1.头部加入这样的一行代码: ...
  • 手机端访问网页自动跳转到垃圾界面的解决办法
  • 完整的商城静态网页(适配手机端和电脑端) 完整的商城静态网页(适配手机端和电脑端)
  • 最近弄了一个手机端的个人中心,但是当页面拖动到底部或者是顶部的时候,会出现一个灰色区域,本来以为这是无法避免的,直到看到了锤子便签生成的网页在手机上网页居然是固定住的,拖动到两端也不会再出现,这样的...
  • 手机端网页调试工具

    千次阅读 2017-04-13 16:25:34
    智能手机还未普及时,移动设备的调试处处是alert的,这估计是最常用的办法了。以前很多时候为了预览页面移动设备上的效果,需要先将页面上传到测试服务器,再将url输入到设备浏览器,或者使用第三方二维码扫码...
  • 一个网站,当访客在手机端上访问的时候,最终落地的应该是手机端的页面。如果网站采用的是响应式框架做了自适应,那么体验是OK的;但是如果网站不是用响应式,而是PC和手机端分离开来,那么访客使用移动设备访问网站...
  • HTML5手机端网页开发

    千次阅读 2017-08-17 15:48:37
    --> 仿真交易移动端 href="js/alert/SyntaxHighlighter/shCoreDefault.css"> ... //2016.3.23 wjq update 之所以要加个判断返回一个20.5,是因为当用户谷歌等浏览器直接输入手机端
  • 1. 目的:实现h5网页在手机端即可缩放且字体与电脑端字体匹配 2. ``` ,inital-scale=1.0,user-scalable=no;"> ``` h5中包含该段代码可保证h5在手机端字体与电脑端字体匹配,但不可缩放。后为实现缩放,,将...
  • SignalR使用长连接的方式来与服务器端通讯,我手机网站的每个页面加载时开启...我认为是在手机端跳转页面时,原页面的连接依旧保持着,没有断掉,最终导致连接数超过限制,后面的连接无法成功 请问如何处理这个问题
  • 网页端和手机端自动适应网页设计

    千次阅读 2015-05-29 11:07:33
    手机的屏幕比较小,宽度通常600像素以下;PC的屏幕宽度,一般都1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。...
  •  上周三快放假的时候由于我们的APP有一个活动公告,而原理就是生成一个HTML网页手机端来访问,起初自己编码以后就直接使用的普通HTML标签生成,但是直到下午用iOS访问的时候出现了问题(注:HTML苹果上面显示...
  • 网页制作 手机端与PC端兼容

    千次阅读 2018-04-19 22:34:21
    网页制作——手机端与PC端兼容手机端与PC端使用一套代码时,随屏幕分辨率的大小变化,会产生媒体查询并实现手机端与PC端的切换(一套代码)&lt;meta http-equir=”Cache-control”content=”no-transform”/&...
  • 产品:关于手机移动端的租房网站 角色:这个产品中用户包括房东与房客 功能:房东可以这个平台发布自己的房屋,房客可以这个平台寻找自己想要租的房子(类似短租平台) 设计模式:使用前后分离进行项目开发...
  • 手机端网页上下手指滑动图片切换效果代码!
  • fullpage的全屏滚动插件默认是不允许html和body出现滚动条的,现在PC的网页想要适配在手机上,又不能缩放的太厉害,内容...请教大神,fullpage的网页在不想过度缩小页面的情况下,怎么允许用户通过滚动条来查看页面?
  • 请问用Bootstrap写的自适应的网页放到手机端浏览页面就缩小了,而且字体也变小了,怎么解决呢?求助!!!
  • 工具/原料一个浏览器方法/步骤先一个简单的网页代码&lt;...gt;&lt;head&gt;&lt;meta charset="...PC电脑的实现效果如图移动端的实现效果如图很明显,当移动端上显示时,它仍然是按照,p
  • 通过手机端访问PC端网页项目

    千次阅读 2016-09-03 11:09:14
     平时,我们PC编写的代码一般来说都可以直接PC上面查看,展示,但是我们苦于不能再手机或者其他设备上面展示,现在我们的界面想要移动端设备上边展示、缩放等操作,就需要一些所谓的工具是必不可少的,往往...
  • 手机端和PC端网页的百分百自适应

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 79,438
精华内容 31,775
关键字:

如何在手机端看网页版的网站