我已经设置了网站。它应该显示为css设置。当我转动IPad设备时页面有效。
但是,对于较小屏幕尺寸的设备,如5.5英寸智能手机。
网页结构已完全改变和挤压。
我在HTML中添加了以下代码。但它不起作用。
使用移动设备显示页面的任何方便简单的方法,与使用计算机浏览器显示的页面相同?
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1">`
我认为您可以通过使用Javascript强制视图作为桌面视图来解决问题。
一个好主意是使用断点。基本上,它的工作原理如下:
@media screen and (min-width: 500px) {
/* Fill here with CSS styling */
}
@media
用于为不同的设备或屏幕宽度定义不同的样式规则。基本上,它告诉浏览器准备设置断点。
screen
是告诉浏览器将改变什么样的媒体的部分。
(min-width: 500px)
是实际的断点。屏幕宽度为500像素及以上的任何设备都将应用这些样式规则。另一种方法是使用max-width
,它恰恰相反。