解决在部分安卓手机个别浏览器上出现皮肤过大的问题

如图,在某些安卓手机上会出现这样的情况。

Screenshot_2016_09_03_20_22_52_副本

首先,检查在tour.html文件是否写了

这里关键是 target-densitydpi=device-dpi

 

其次krpano使用mobilescale控制元素在手机上的整体比例(html文件的embedpano函数里)

  • 默认在移动设备上所有krpano内容缩放为0.5。
  • 要屏蔽该设置,将mobilescale设为1.0.
  • 对于响应式web设计有用。
  • 同时查看xml关于stagescale设置。

 

如根据是否为QQ浏览器选择mobilescale的代码(tour.html):

 

使用stagescale控制元素的整体比例

变量名 (仅HTML5可用) 数值类型 默认值
stagescale Number 1.0
全局整体缩放设置。
stagescale设置可以缩放全部krpano元素和尺寸。

通过缩放全部元素,krpano的stage-size(屏幕尺寸/分辨率)自身将会根据这个数值相反地进行缩放。例如,数值为0.5时使得所有元素为原来的百分之五十大小,同时内部的stage-size增加到200%。

默认的stagescale数值依据设备、浏览器、JavaScript的window.devicePixelRatio数值而定。在桌面和平板浏览器上,这个数值默认为1.0,移动设备默认为0.5。

这就是说在移动设备上的元素通常为桌面或平板设备的一半大小。为了屏蔽这个行为(实现某些自定义调用的布局),在第一个载入的xml文件中加入下面的代码:

<action name=”mobilescale” autorun=”preinit” devices=”mobile”>
mul(stagescale,2);
</action>

如在vtourskin.xml中有这么一段:

 

延伸阅读

控制用户界面的整体大小