问题标签 [adaptive-design]
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.
mobile - 如何制作 m.domain 网站的指南（自适应）
我一直在努力寻找有关如何制作像 m.domain.com 这样的自适应（我认为这就是所谓的）网站的指南。然而，我在谷歌上只能找到展示响应式与自适应优缺点的设计博客。
我猜你必须使用 JavaScript 来检测客户端的设备或浏览器，并重定向到移动站点。
如果你们中的任何人知道我需要检测和重定向的一段代码（如果这是你必须做的）或构建这样的移动网站的指南，我将不胜感激！
提前致谢！
css - 如何在媒体查询（最小宽度、最大宽度）、window.width、screen.width、device-width 等之间进行选择
我正在研究自适应方法与反应方法的使用，并且在此过程中一直在阅读有关媒体查询、css 宽度、屏幕宽度、窗口宽度、文档宽度等的所有讨论。我发现没有一个文档是这样的在一个地方正面解决所有这些参数，并探索它们在构建自适应或响应式站点中可能存在的相互关系。
以下是我的一些问题，这些问题在上述上下文的整体中没有在其他地方得到充分解释。我得出了一些结论，如果结论有误，我希望得到澄清。我确实实现了一个原型，但它似乎使用许多方法都可以正常工作。我想知道实现自适应或反应式站点的最佳实践是什么。
假设：
一个。拥有不同桌面和设备但使用现代浏览器的广泛受众。
湾。基于 JS 的解决方案优于纯 CSS。
C。只专注于屏幕显示。
研究（真的，没什么大不了的！）：
大多数据说简化媒体查询 API 的插件实际上只集中在上述 API 上（例如enquire.js）。是的，除了在元标记中指定像素比例因子外，我还没有看到在任何地方使用过设备宽度。有许多帖子质疑为什么通过媒体查询或通过旧方法检索到的某些上述宽度参数不匹配。这是一篇这样的帖子。我明白那个。
现在，我的问题是：
- 在所有这些媒体查询喧嚣和在自适应/响应式网站上撰写的数千篇文章中，我们所关心的只是根据当前浏览器宽度和对浏览器宽度变化的响应来提供内容？即使是纵向/横向也是一个宽度问题。
- 实际设备检测不是媒体查询的目标，并且对于开发自适应/反应式站点并不是真正必要的，这是否正确？媒体查询（对于屏幕）的唯一目标是将浏览器宽度划分为存储桶或断点（例如，参见breakpoint.js ）？
- 为了向广大受众开发响应式/自适应站点，是否值得使用deviceAtlas等设备检测服务？
- 通过使用媒体查询 API 与仅获得 $(window).width 相比，我们获得了哪些真正的优势？是否支持更广泛的浏览器？标准方法？其他优势？你采取哪种方法都没有关系？
- 大多数自适应/响应式站点是否对用户使用的实际底层物理设备完全视而不见，并且仅依赖于 USER AGENT 信息和此处讨论的宽度？
html - 基于 FLEX 的自适应跨浏览器 CSS 设计。为什么 Chrome 和 Opera 显示不正确？
我创建了一个简单的自适应 html+css 布局。它的意思是主块里面有内容，底部一直是“钉”的页脚，不管Page块的内容（内容可能是空的！）。我在css flex上实现了设计。如果内容块为空，则在Firefox，IE中正确显示页脚（粘在浏览器窗口底部）。但是，如果我在 Chrome 或 Opera 中打开，页脚会从浏览器窗口滑出（不会粘在浏览器窗口的底部），大约是 Header 块的高度
我找不到原因，请告诉我 Chrome 和 Opera 浏览器出了什么问题。
ps 请不要使用绝对位置！这就是使用 FLEX 技术的原因。
pps 示例代码（使用“整页”片段！）：
来自 Firefox（正确）和 Chrome（不正确）的 ppps 屏幕截图如下
Chrome： 谷歌浏览器 - 屏幕截图
javascript - 分页取决于窗口大小 - 查找每页项目数的方法
对不起，很抱歉，非常感谢您平时的时间和指导。
我有一个未知尺寸的 div；实际上，它的宽度和高度是使用百分比设置的，因此以像素为单位的最终值取决于窗口innerWidth的innerHeight属性。
我需要在该 div 中创建一个 ajax 分页。换句话说，我有两个孩子div（下图）。第二个是用于分页链接。第一个负责持有物品（水平和垂直对齐）。它将（自动）具有未知宽度。因此，里面的项目数量取决于它的最终宽度和高度，因为所有项目都有一个固定的已知宽度和高度（比如说 80 像素宽度和 50 像素高度）。
我希望下图能以最好的方式说明我的问题：
目标是找到找到 X 和 Y 值的好方法。
- X= 每行的项目数
- Y= 每列的项目数
这两个值将有助于查找每页的项目数（用于服务器端进行分页）。将通过将总页数除以该值来创建分页链接。注意：一切都是用 ajax 完成的。
我打算做什么：
- 创建一个 javascript 函数
calculate_viewport()，使其在解析/执行任何其他内容之前首先执行。 - 创建一个 javascript 函数，该函数根据返回的值计算 X 和 Y 值
calculate_viewport()。 将 X 和 Y 用于请求某个页面的 ajax 调用。
您如何看待这种方法？还有其他更好的方法来实现这个目标吗？<script>是否可以在标签之前创建标签<html>以进行早期窗口大小计算？
注意：对于服务器端部分，我设法通过我正在使用的 ORM 库提供的一些功能对结果进行分页。我使用一个服务器端模板引擎，它将项目页面呈现为 HTML。我准备根据要求提供这部分的任何代码。谢谢
css - 响应式图像，在移动设备上提供小型服务，可下载为原始图像
我希望标题不会太混乱。
我正在使用自适应图像来检测访问者的屏幕大小，并自动创建、缓存和提供网页嵌入 HTML 图像的设备/断点适当的重新缩放版本。
现在......有些人想将图像保存在他们的手机/智能手机上，但是使用自适应图像来提供更小尺寸的图像（以节省带宽/下载时间）会给他们提供更小尺寸的图像 - 而不是大小合适的图像或原始图像图片。
有人对以下内容有任何想法吗？
- 提供放大的图像
- 如果人们想保存它们，可以使用原件
xaml - UWP 视觉状态管理器看不到 DataTemplate 的内容
我的页面结构如下所示。
当我将dateTB文本块的 setter 添加到VisualState.Setters以将其移动到相对面板的左侧时，我收到一条错误消息：
动画正在尝试修改名为“dateTB”的对象，但在页面中找不到此类对象。
添加setter的代码是：
有没有办法通过这个页面结构的可视状态管理器来控制这个文本块？
mobile - 移动设备上不同表格布局的自适应/响应式设计？
...我试图弄清楚以下是否可以从桌面切换到移动：
基本上在桌面上，我计划在鼠标悬停时出现在信息框中的项目描述，但在移动设备上，我希望信息简单地显示在表格中。我的问题是：这是否可能仅使用 CSS，或者在以不同的 HTML 包含的内容呈现页面时，我需要使用一些服务器端的恶作剧吗？
我唯一能想到的就是使用@media 查询以及一些繁琐的放置来显示/隐藏元素的某种复杂的显示/隐藏，但我觉得必须有一种直接的方法来实现这一点？
如果有人能指出我正确的方向，我会非常……呃……感激！
谢谢！斯图
html - 自适应设计在移动设备上运行错误
这是链接http://testmvs.zzz.com.ua/，这是我的测试域。我写了这个网页，让它自己自适应（没有任何框架），在浏览器中它看起来我需要，但是当我在我的 iPhone 上观看这个网页时它看起来不对我写了 meta name="viewport" content=" width=device-width, initial-scale=1"，为什么它看起来与桌面版本不同？
html - 自适应布局移动问题
对于不同的浏览器宽度，我有 3 种替代布局。在我的 index.html 中用 CSS 编码，如下所示：
当我更改浏览器窗口大小以及在几个响应式布局测试页面中对其进行测试时，它可以在我的桌面上完美运行。
问题：在我的移动设备（iphone 5）上，在任何浏览器中都不起作用：它使用了错误的屏幕尺寸布局。atm 无法在其他设备上测试。
有什么建议么？