问题标签 [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.
php - 带Galleria的自适应图像
我正在使用 Galleria.js 在我正在处理的网站中创建背景幻灯片,并且我希望能够为不同的设备提供不同的分辨率。我正在使用正在生成所需文件的adaptive-images.php,但无论如何,似乎galleria仍在拉动原始的全分辨率文件。有没有办法让这项工作,或者像picturefill.js这样的替代解决方案?
谢谢!
responsive-design - 如何防止响应/自适应皮肤缩小到 360 像素以下
我正在制作一个我构建的响应式网络应用程序。我无法让某些屏幕的宽度小于 360 像素。但许多智能手机正试图以 320 像素宽显示它。如何使它响应低至 360 像素但不少于?
更新:在发布之前,我已经指定了一个视口标签:
而且,我为 360px 的容器设置了最小宽度。问题是这样做时,当用户第一次访问该网站时,右侧的 40 像素会被隐藏,因为 iPhone 和许多其他人默认仅显示 320 像素,即使它们能够显示更多。我知道他们可以缩小,但我希望它在加载时显示 360 像素宽。
css - 用于模块化项目设计的“本地”CSS 媒体查询
最近我被要求为一个网站构建一个组件元素。这个组件应该是完全可调整大小的。我想要的是利用 CSS3 媒体查询来制作不同大小的布局。如果组件最初将整个页面用于显示,它会很好地工作,但如果它以 50% 的宽度放在 div 内,那么它的大小会改变一半,但这并没有反映在它的内部布局中。我想要的是 Media Queries 提供的相同行为,但面向组件的方法。CSS可以吗?
mobile - 响应式/自适应设计;基于屏幕大小的表格到单个项目
我正在重新设计一个调查回答应用程序,我希望它可以在台式机、平板电脑和智能手机上运行。台式机和平板电脑可以使用或多或少相同的界面,但手机是另一个问题。
大屏应用界面或多或少是一个表格,第一列是一组问题,下一列是答案。(问题可以有 1(布尔)到 9 个选项)。但是这种设计不容易转移到较小的屏幕上。所以我的想法是当屏幕宽度低于某个阈值时显示单个问题。
所有问题都是预先加载的,所有答案都会“点击”推送到服务器。(是的JS是必须回答的)。我正在使用 CSS 在大屏幕应用程序上的“页面”/“组”问题之间进行转换。在小屏幕上我想做同样的事情,只是这一次是在单个问题而不是一组问题之间。
看我精美的草图:
我可以用“响应式/自适应设计”来做到这一点吗?或者我应该在不同的屏幕尺寸上加载两个不同的视图?
ios - 何时解决自动布局约束?
我有一个小问题,似乎在viewWillAppear
自动布局约束还没有解决。事实上,我正在使用新的自适应 UI,默认尺寸为 600x600,不代表任何真实设备尺寸。但是当我启动模拟器时,主视图的大小viewWillAppear
仍然是 600x600,而不是真实的设备大小!!!
那么,我什么时候才能真正在视图显示之前测试其最终大小?因为您可以理解我不想在 中这样做viewDidAppear
并且对用户有某种闪烁...
提前致谢。
angularjs - AngularJS 模板切换
我们的客户想要一个响应式网站,但他想要更改和移动如此多的内容,以至于我们将遇到引导限制。
使用引导程序,您可以显示和隐藏块并使用偏移量移动它们,但不知何故它有其局限性。这是一个要求苛刻的客户,不会尊重这些限制,因此我们正在寻找其他选择。
为了避免创建重复的内容并仍然能够提供移动/桌面体验,我们的团队提出了 AngularJS。
我们的 JSON 数据和 Angular 控制器可以保持不变,但我们只需要在移动/平板/桌面上切换视图。
有没有一个好的稳定解决方案来让它工作?我们是否可以像通过调整浏览器大小来测试响应式设计一样对其进行测试,或者用户代理检测是唯一的解决方案吗?这在测试过程中会很痛苦,因为我们需要很多设备或模拟器来测试。
ios - 关于向后兼容自适应文本大小(iphone6/5/5s 等)的任何提示
致力于更新新手机的 UI。自然,我有几个文本字段在 iphone6/6 plus 上显得更小。
因为我需要我的应用程序可以回到 IOS5,所以我不能使用自动布局或新的自适应文本字段的东西。我环顾四周,但似乎没有太多关于这个话题的内容。
我真的不想使用 if(IPHONE6){...} 来设置文本字段的大小,所以如果有人有更好的想法,我会全力以赴!
asp.net - 服务器端屏幕宽度 .NET 51Degrees 等
我正在尝试建立一个自适应/响应式网站。
我的意图是在屏幕宽度 >= 1024px 的所有设备上显示我的桌面版本,并使用响应式 CSS 来缩放元素。所有元素都将显示在此视图中。
对于 < 1024px 的屏幕,显示会有所不同,显示不同系列的元素和一组不同的响应式 CSS 规则。
所以,我需要能够确定服务器端的屏幕宽度。
我知道我可以使用 Javascript cookie 和 AJAX 来做到这一点,但我不想那样做,所以试图寻找某种 ASP.NET 插件,所以遇到了51Degrees,但没有取得多大成功。 ..
使用谷歌浏览器移动模拟器,我总是得到不正确的宽度结果,几乎只有黑莓剧本是正确的!iPhone 返回 640 像素的宽度,许多设备的宽度增加了一倍,我认为这是因为设备像素比
此外,代码已过时,即它忽略了 iPhone6 等,我想这意味着我需要使用付费版本以便它自动下载和更新其参考文件?
代码很简单:
但是,根据我上面的评论,这对我的目的来说基本上没有意义,同样,当我只需要如此少量的数据时,拥有这个相当复杂的 51Degrees 参考也感觉有点矫枉过正。
以前我使用正则表达式查询来检查用户代理,它看起来像这样:
这工作正常,但过于宽泛,例如,将任何 Android 设备作为移动设备返回,即使它是具有 1024 屏幕分辨率的 Galaxy Tab,我不想被视为移动设备。您可以看到我修改了代码以不将 iPad 视为移动设备,但对 Tab 执行相同操作却没有成功。
最后是我的实际问题:有没有人有任何现实的建议来实现这一点,或者知道我可以调用一个定期更新的 API 来从用户代理中获取这些数据,或者任何东西......?
html - 响应式设计问题 - 带有模式弹出窗口
我开发了一个自定义模式弹出窗口,在我的项目中用作通用组件。不同的内容/html 在模式内部传递,以了解它从哪里打开。
Plunk - http://plnkr.co/edit/aApQZhgMZJkMAjLtjF5P?p=preview
HTML:
CSS
JS
)
如上面的 plunk 所示,当点击按钮 1 时,弹出窗口内的内容较少,因此弹出窗口的大小非常小。但是当从另一个按钮调用弹出窗口时,那里有很多内容。现在,我必须在所有平台上进行这项工作——手机(iphone/nexus)、平板电脑(nexus/ipad/ipadmini)和桌面浏览器。
我面临的问题:
1)当从按钮一打开模态框时,模态框的宽度会非常低,因为内容不多,只有几行文字的小列表。
2)第二个按钮的模态在手机上占据了整个屏幕,因此我想保持模态的宽度为100%。但是如果我这样做,它也会在平板电脑和桌面上占据全屏,这不是必需的,它应该只在标签和桌面上占据 50%。而且我还需要确保模态保持与第 1 点或从按钮一打开时一样小。
3) modal直接附加到body标签
4)由于 modal 是通用组件,我只想保持它的样式相同,而不管它在哪里被调用。并且为了处理不同的实例,模态中的 div 可以用于不同的宽度。
因此,考虑到所有 4 点,我无法让它在所有平台上运行,我能够在台式机/平板电脑上完成它,但不能在手机上完成,因为它需要 100% 的屏幕。
ios - IOS 8 Adaptive Layout. Different Layout for ipad orientation
Can some one please give me some idea of how to use universal storyboard to show different layouts for iPad portrait and landscape.