使用WKWebView自适应屏幕遇到的问题以及最后解决的方法

一、使用WKWebView自适应屏幕遇到的问题以及最后解决的方法

在网上找了很多方法我就不废话了 先一一列举出来

第一种方法:这种方法适配屏幕不是太好,双击才可以完全适配屏幕,有兴趣的话可以自己试一下

第二种方法:

在初始化WKWebView的时候添加配置可以解决自适应的问题 ,但是在加载的内容宽度大于高度的时候就有些不准确了,宽度无法自适应屏幕的宽度,最后我也没搞明白是因为什么原因,最后就放弃了这个方法。

//自适应屏幕宽度js

在加载的过程中我使用KVO监听加载的进度,从而获取最后加载内容的高度。

根据WKWebView的状态去判断是否加载完成:

有可能需要用到进度条和title属性

一定一定要记得移除KVO监听

第三种方法 也是我最后使用的方法:

我的需求是让图片的大小跟着屏幕的变化而变化,就是动态的去适应屏幕;那么文字的字体就是自己可以控制,可大可小。要想达到这样的效果,在用loadHTMLString加载字符串之前对它进行处理

处理HTMLString的原理:

原理就是用一个for循环,拿到所有的图片,对每个图片都处理一次,让图片的宽为100%,就是按照屏幕宽度自适应;让图片的高atuo,自动适应。文字的字体大小,可以去改font-size:14px

二、js中的display

style是样式

display 是样式中的显示

none和block都是显示中的参数

none 为不显示

block为显示

参考

block : CSS1 块对象的默认值。用该值为对象之后添加新行

none : CSS1 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间

inline : CSS1 内联对象的默认值。用该值将从对象中删除行

compact : CSS2 分配对象为块对象或基于内容之上的内联对象

marker : CSS2 指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用

inline-table : CSS2 将表格显示为无前后换行的内联对象或内联容器

list-item : CSS1 将块对象指定为列表项目。并可以添加可选项目标志

run-in : CSS2 分配对象为块对象或基于内容之上的内联对象

table : CSS2 将对象作为块元素级的表格显示

table-caption : CSS2 将对象作为表格标题显示

table-cell : CSS2 将对象作为表格单元格显示

table-column : CSS2 将对象作为表格列显示

table-column-group : CSS2 将对象作为表格列组显示

table-header-group : CSS2 将对象作为表格标题组显示

table-footer-group : CSS2 将对象作为表格脚注组显示

table-row : CSS2 将对象作为表格行显示

table-row-group : CSS2 将对象作为表格行组显示

三、如何使div能根据屏幕尺寸来变化

用百分比,或者用js去控制

用百分比的时候要注意,一定要把overflow:hidden加上,否则父层会自动被撑开

四、在js中遮罩层的宽高是根据页面的宽高获取的为什么在加载遮罩层的时候还是会出现滚动条呢

$(window).height();

$(window).width();

五、怎样才能把用java编写的对话框运行时出现在屏幕中央??

//设置屏显位置

Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize(); //获取当前屏幕大小

Dimension frameSize = mainTop.getPreferredSize();//获取当前窗口大小

mainTop.setLocation((screenSize.width - frameSize.width)/2, (screenSize.height - frameSize.height)/2);//保持窗口弹出位置居中

用法:在代码中加入上面三行代码。mainTop是你定义的要弹出的窗口的实例名。

原理:

首先获取当前屏幕的大小。

其次获取弹出窗口的大小。

最后设定弹出窗口的位置。这个弹出的点是指弹出窗口的左上角的坐标。所以计算的方法为:屏幕宽度的一半减去弹出窗口宽度的一半为横坐标,屏幕高度的一半减去弹出窗口高度的一半为纵坐标。 屏幕的左上角为原点。

不明白可以继续提问。呵呵。

六、如何使div中的图片自适应宽度和高度,图片不变形,可以超出div,超出部分隐藏

1、HTML的div标签主要是用来布局,div默认是没有任何属性的这也是常用它布局的原因。

2、主要设置两个div,一个div在外一个div在内,并设置div的边框颜色。

3、首先打开页面,具体如下图所示。

4、F12打开审查元素,修改内层div的宽度,外层div随着边框。

5、修改内层div高度,外层div高度随之改变。

6、div定位测试。div如果使用了定位position则外层不会随内层div变化。

7、最后输出结果如图。

上一篇:下一篇:ipad去苹果售后换屏幕多少钱
下一篇:上一篇:返回栏目