问题标签 [initial-scale]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
3901 浏览

css - 如何设置初始比例以使网站在所有设备的浏览器上都能很好地呈现

我很难弄清楚如何设置初始比例,以使网站在所有不同的浏览器、操作系统和设备上看起来都很好。我的网站有一个 main.css 文件,然后根据您拥有的设备包含其他文件,例如 mobile.css 和 tablet.css。

我有一个键值对哈希表,其中键是浏览器+操作系统+设备,值是初始比例值。在为视图分配适当的初始比例之前,我的控制器代码将确定您使用的浏览器+操作系统。这不是输出初始比例的好方法。

我想要以下任何一种解决方案:

  • 只指定一个常量初始比例,结合其他常量属性,将很好地呈现网站

  • 基于浏览器、操作系统和设备的其他属性推导出适当初始比例的简单方程

  • 一种在所有浏览器、操作系统和设备上一致地呈现网站而不使用初始规模的方法

以下是我遇到的示例问题:如果我将初始比例设置为 1,它在 Galaxy Note 1+Stock 浏览器+Android4.0.4 上渲染得很好,但在 Galaxy Note 1+Chrome+Android 4.0.4 上它太大了. 换句话说,在同一部手机和同一操作系统上,但在不同的浏览器上,规模是乱七八糟的!事实上,它在所有 iOS 设备上看起来也很丑陋。在 OS6 的 iphone4S 上太大了,在 OS 5.1 的 iPad 1 上稍微太大了。

一定有更简单的方法来控制移动设备上的网站规模吗?

0 投票
1 回答
423 浏览

css - Initial-scale vs. desktop.css+phone.css+tablet.css?

I just discovered the initial-scale meta attribute.

Previously, I've been using a default.css to define all my styles and sizes (for fonts and elements) so they appear nicely on screen real estates of desktop computers. Then I might use media queries or PHP to include an phone.css or tablet.css if you're using a phone or tablet, and this will adjust ONLY SIZES for smaller devices.

But now that I've become aware of the concept of initial-scale, should I be using that instead to control sizes of elements?

A very important consequence I'm trying to get at is this...I use to define my font sizes with EM (or REM) units like this:

In other words, my phone.css and tablet.css only adjusts the font-size percentage on the html element, and all other elements will scale accordingly on all different devices. To a certain degree, i do this wiht padding, margins, lineheights and letterspacing.

With the introduction of initial-scale, does that mean EM/REM units are irrelevant for scaling font sizes? We can stick to the much more intuitive PX units? And let initial-scale do the rest of the scaling work?

0 投票
1 回答
590 浏览

html - iOS6 在使用 initial-scale=1.0 和 maximum-scale-1.0 时显示站点太大

感谢观看。当我从元标记中删除初始和最大扩展时:

<meta name="viewport" content="width=device-width, user-scalable=no" />

标签,iOS 6 Safari 显示的网站太大。我必须取出初始值和最大值,因为它太合适了。像这样离开视口标签是否可以接受?我没有在其他移动设备上测试过。

非常感谢。

0 投票
2 回答
2209 浏览

iphone - Retina 手持显示器:可以通过 CSS 实现 1px 边框吗?

我遇到了这样一个问题,即我的 iPhone 4 等显示器的设计概念包括 1px 边框,我不知道 Retina 设备以 2x 的纵横比测量 CSS。

因此,我开始利用max-device-width:640px(用于纵向)的媒体查询来设计页面,并认识到如果我将视口元设置为initial-scale=.5.

问题是:如果我不想initial-scale=.5在 iPhone 的实际像素尺寸中设置和定义媒体查询,似乎没有办法在 Retina 显示器上实现 1px 宽的边框等,因为设置border:.5px将强制 iOS 计算它的整数值 - 这似乎导致 0 而不是 1。

0 投票
1 回答
673 浏览

mobile - 手机上的网站。如何设置初始比例以使网站适合屏幕?

我想知道如何设置“初始比例”,以便在各种设备上,当您第一次加载网站时,网站的宽度适合屏幕的宽度。

我的网站

http://bam.net16.net/BAM/

它在常规浏览器上工作得很好,但我有奇怪的行为,文本膨胀 + iframe 在移动设备浏览器上是半空白的。视口元标记正在帮助我。现在工作正常。

Atm 如果初始比例很大并且网站开始放大,那么当您缩小时,永远不会绘制网站内屏幕外的 iframe 部分。如果将其设置为较小的初始比例以使其开始缩小,您可以放大并且一切正常。

0 投票
1 回答
3210 浏览

android - Android Webview setinitialscale 不起作用

我有一个 webview,我想设置它的比例

但是无论我放 setinitialscale(50) 还是 setinitialscale(300),setinitialscale 都会失败

如果我加载外部网站,Setinitialscale 工作。

但不适用于在资产中加载本地 html 文件。

这与我加载的网页的 html 有关吗?有人对此有想法吗?

html如下:

0 投票
1 回答
876 浏览

ipad - 响应式设计:第 4 代 iPad 是 2048px x 1536px,但媒体查询在 768px 及以下激活...为什么?

我正在第四代 iPad 上测试一个网站,它的像素大小为:2048px x 1536px,但它激活了我的“移动”媒体查询(纵向视图),它是 768px 及以下,它激活了我的“平板电脑”媒体查询(在横向视图中),即 769px 和 1024px。

我很好奇它为什么会这样?

我在头部使用这个元标记,我确定这就是它这样做的原因,

而且我没有抱怨,我认为这是它应该工作的正确方式。我只是对它为什么起作用感到困惑?将 1536px 变成 768px 的魔法是什么?

0 投票
2 回答
9820 浏览

android - Android 4.1 视口缩放(setInitialScale,元初始缩放不起作用)

SO和互联网上的其他地方有数百篇关于尝试修复Android中的视口缩放的帖子,我现在相当确定你不能在Android 4.1的webview中设置初始比例。

我正在构建一个 Cordova (Phonegap) 应用程序,我已经在 iPhone 3GS、4S 和 5 以及 iPad 2 上很好地扩展了所有东西,在 iOS6 上运行 iOS7 和 3GS

我还调整了 UI 以适应运行 Android 4.4 的 Moto G、LG Nexus 5、Google Nexus 5 和三星 Galaxy S4

但在运行 Android 4.1 的三星 Galaxy S2 和 S3 Mini 上,我无法设置初始比例。

HTML 视口元标记不适用于 4.1 或 4.4(适用于 Chrome,不适用于 WebView 或默认浏览器):

我已经从 cli 中敲出了一个绝对基本的 Cordova 项目cordova create basicProject,如果我在主 Activity 的 onCreate 方法中添加一些 Java,特别是该setInitialScale方法:

然后我按预期获得了 4.4 缩放的 Moto G:

Android 4.4 上的 Moto G,初始比例为 0.5,通过 setInitialScale(50)

但在 Galaxy S2 上运行的完全相同的项目没有得到扩展。

Android 4.1 上的 Galaxy S2,初始比例为 0.5,通过 setInitialScale(50)

我仅限于在带有 4.1 的三星设备或 4.4 上的一系列设备上进行测试,所以如果有人可以在 4.2 或 4.3 上测试相同的东西,或者在 4.1 上没有三星的任何人,那将很有帮助。

有谁知道如何让Android 4.1服从setInitialScale()

0 投票
1 回答
1526 浏览

jquery - 更改视口缩放(缩小)仅适用一次

我对 iPad 的缩放有疑问。

单击时,用户应该得到一个带有叠加层的弹出窗口,并且视图不应该被缩放——这意味着它应该缩小到 0.75(基本上尽可能地缩小)。因此,我将此 jQuery 代码应用于视口:

关闭时,我也将其重置为原始值以启用缩放。像这样:

所以重申:

  1. 用户访问页面,初始视口内容为width=1020
  2. 用户单击触发弹出窗口的元素,用户可以在页面上捏放大
  3. 弹出事件更改视口内容,使其缩小到 0.75 [代码块 #1]
  4. 当弹出窗口关闭时,视口内容被重置[代码块 #2]

这工作正常,直到用户在第一次视口更改后执行一个捏缩放操作,并再次触发弹出事件。然后应用的视口属性将不会生效,它将保持放大而不是比例 0.75。

TLDR:视口缩小只适用一次 :)

附加更多代码:

基本上就是这样。没有造型的身体。只创建了一个拉伸的固定 div。

0 投票
0 回答
200 浏览

mobile-safari - 可以在不硬刷新的情况下重置视口比例吗?

在移动 Safari(例如)中,如果用户在整个站点上然后切换到移动设备,它会保持以前的视口比例。

如何强制浏览器一次性忘记记忆的音阶?

Javascript 解决方案最好,但对其他想法持开放态度。

添加:

发现这个更适合 android 的措辞问题:

**如何在不刷新整个页面的情况下重置视口缩放?**

但是我在 ios 上也看到了同样的问题,没有硬刷新页面比例永远不会重置。