网上关于这方面的文章有很多偅复的东西本文不再赘述,仅提供思路并解释一些其他文章讲述模糊的地方。
1、使用meta标签这也是普遍使用的方法,理论上讲使用这个標签是可以适应所有尺寸的华为手机屏幕点击失灵的但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
首先解释该标签的含义:
如果你完全不了解这个标签的使用需要先百度一下
解释:content中的“width” 这个width指的是什么宽度,我看过的文章对这個都没有解释的很清楚有几个备选:虚拟窗口的宽度、手机华为手机屏幕点击失灵的宽度、还是页面的宽度等等?经试验这个指的是虚擬窗口的宽度了解宽度之后,对后续的各种scale就应该知道是谁与谁的比例,是 虚拟窗口宽度 / 页面宽度这样就会有问题出现安卓设备尺団差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸,当然有些浏览器会自动缩放使其适应华为手机屏幕点击失灵泹这不是统一标准,正确的做法是用js动态生成此标签当然,应该先获取华为手机屏幕点击失灵尺寸
对于此标签还有以下需要分享:
3)、掱机页面可以触摸移动,但是如果有需要禁止此操作就是页面宽度等于华为手机屏幕点击失灵宽度是页面正好适应华为手机屏幕点击失靈才可以保证页面不能移动。
4)、如果页面是经过缩小适应华为手机屏幕点击失灵宽度的会出现一个问题,当文本框被激活(获取焦点)時页面会放大至原来尺寸。
以上是使用viewport标签的一些小体会分享给大家。
2、第二种自适应华为手机屏幕点击失灵尺寸的方法是将页面做荿980宽度在没有viewport标签的情况下,移动设备华为手机屏幕点击失灵范围会显示页面980的宽度如果页面大于980,则在华为手机屏幕点击失灵范围內显示页面一部分如果页面小于980,则页面居中两侧显示空白那么你猜,如果页面宽度等于980会出现什么情况呢
3、百分比法,首先应明確一个概年CSS中的百分比中的百指的是什么,我告诉你指的是父元素所有百分比都是这样的。子元素宽度50%那么父元素的宽度就是百,孓元素的padding-left:50%父元素的宽度是百,子元素的margin-top:20%那么父元素的高是百。所以body默认宽度是华为手机屏幕点击失灵宽度(PC中指的是浏览器宽度)孓孙元素按百分比定位(或指定尺寸)就可以了这只适合布局简单的页面,复杂的页面实现很困难
4、使用css3单位rem,有人这样解释remroot-em,就昰根部的em想必em大家都懂的,那么rem就是将根节点html的font-size的值作为整个页面的基准尺寸默认html的font-size是16px,即1rem=16px如果某div宽度为32px你可以设为2rem。当我们把html的font-size設为20px时1rem=20px,那么32px=1.6rem了到这里我们也就了解了rem的用法了,那么怎么用rem来实现不同尺寸华为手机屏幕点击失灵的自适应呢在页面载入开始时艏先判断window的宽度(是window的宽度($(window).width()),不是华为手机屏幕点击失灵分辩率的宽度(screen.width)两者的差别请自行查阅),假设宽度为W一个div在宽度为640px的设計稿的下的宽度为dW1,这样如果html的font-size为100px那么这个div的宽度用rem表示是多少呢?计算:div宽度dW2=dW1/100,px与rem之间很好换算除以100就可以,这是假定华为手机屏幕點击失灵宽度为640的而不同宽度的华为手机屏幕点击失灵怎么处理,为了能保证换算容易那就要为html设置一个合适的font-size计算:100 /
解释一下为什麼把100作为一个缩放比例,用10或1不是更方便吗这是因为大多数浏览器font-size的最小值为12px,所以只能用100了
5、媒体查询,媒体查询也是css3的方法我們要解决的问题是适应手机华为手机屏幕点击失灵,这个媒体查询正是为解决这个问题而生媒体查询的功能就是为不同的媒体设置不同嘚css样式,这里的“媒体”包括页面尺寸设备华为手机屏幕点击失灵尺寸等,比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式可以这樣写,@media screen and
综上至今,我没有找到一种完全适应各种华为手机屏幕点击失灵的方法只能根据页面特点选择不同的方法。
|
|
花粉特种部队 发表于 22:35:57 来自:浏览器
|
|
盖章仅为队員间识别,不代表结贴如果有需要,请在我的跟帖后点击“回复”这样论坛才会提醒我!花粉特种部队并不是华为的工作人员,我们昰一群玩机爱好者来自花粉,服务花粉! |
|
|
|
|
|
|
|
|
|
|
|
|
|