个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我有一个尺寸为 1800x1200 像素的网页(适用于台式电脑)。在平板电脑上，页面并没有被完整地查看，它的一部分跨越了正确的视口(viewport)。我想要实现的是网页使用较小的缩放系数在平板电脑上正确显示。我是 javascript 的初学者，有人可以向我解释 js 代码吗？
最佳答案
尝试在 <head> 中添加这个节
<meta name="viewport" content="width=device-width, initial-scale=1.0">
您可能还必须使用 CSS 媒体查询。如果你不熟悉，最好先学习它。
目前，在您的 CSS 中使用以下媒体查询
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
示例用法
/* Use a media query to add a breakpoint at 768px: */
@media screen and (min-width: 768px and max-width: 1023px) {
.main{
width: 80%; /* The main class's width is 80% , when the viewport is gretaer than 768px or smaller than 1023px which is ideal for tablets (not big tablets) */
}
}
关于javascript - 如何在使用 javascript 加载时针对平板电脑屏幕宽度缩放整个网页？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57267610/
24
4
0
我是一名优秀的程序员,十分优秀！