# 关于 Surface Duo 的讨论

**URL:** https://meta.discourse.org/t/discourse-on-surface-duo/141312
**Category:** UX
**Tags:** pwa
**Created:** [2020年二月11日 17:38 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312 "2020-02-11T17:38:58Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2020年二月11日 17:38 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/1 "2020-02-11T17:38:58Z")

</div>

获取了一些在微软 Surface Duo 新款 Android 设备上运行 Discourse 的截图。

Discourse 主题在移动视图中的显示：

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/5/e5ec8b580c635796e884bae7adce9e7e8965712a.png)

Discourse 主题在桌面视图中的显示：

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/5/1513177d118fb157c75b914c0f26c72cb18b180f.png)

移动视图中的“最新”内容：

 ![image](https://global.discourse-cdn.com/meta/original/3X/4/9/4929db1edf105917ff384cd5941277fe4df93c61.png)

桌面视图中的“最新”内容：

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/9/594686be046816716412175f018cf2edda365e5f.png)

移动编辑器：

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/1/a1981df1d84b6f62e91d1ad89de0cb8a3f10db83.png)

桌面编辑器：

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/9/e93a894f8f3477c128a7f6294405fcf9a889f65d.png)

带“精选”内容的分类视图：

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/f/2fad98047b69d1f52cafc34a7129345352dcbbde.png)

带“最新”内容的分类视图（完美契合）：

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/a/0ad00474bdca53c9f53f7232b40949b315343e6a.png)

目前还有一些浏览器功能提案正在酝酿中，旨在帮助网页应用进行相应的布局：

> ### 一个地图应用，在一个窗口区域显示地图，在另一个区域显示搜索结果
> 
> [![折叠屏设备，窗口左侧区域显示地图，右侧区域显示搜索结果列表](https://global.discourse-cdn.com/meta/original/3X/d/e/de6dde78b8cdb6b8aaa3b0523e8fa80d74cf12eb.svg)](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/Foldables/map-app.svg)
> 
> #### CSS 解决方案概要：
> 
> ```css
> @media (spanning: single-fold-vertical) {
> body {
> flex-direction: row;
> }
> 
> .map {
> flex: 1 1 env(fold-left)
> }
> 
> .locations-list {
> flex: 1;
> }
> }
> 
> ```

---

<div class="post-metadata">

### Author: ![justin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin/32/157614_2.png) [@justin](https://meta.discourse.org/u/justin)
#### Post date: [2020年二月11日 17:42 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/2 "2020-02-11T17:42:39Z")

</div>

天哪，太尴尬了。

欢迎来到充满创新的奇妙世界！我为那些早期的采用者感到难过，他们在未来几年里将不得不忍受次优的体验（不一定是 Discourse 的问题，而是其他所有未能根据这些变化进行更新的网站）。

---

<div class="post-metadata">

### Author: ![downey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/downey/32/166878_2.png) [@downey](https://meta.discourse.org/u/downey)
#### Post date: [2020年二月11日 17:46 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/3 "2020-02-11T17:46:09Z")

</div>

就我个人而言，我既期待又有些勉强地等待针对可折叠设备的新 CSS 媒体查询：

> <https://github.com/w3c/csswg-drafts/issues/4141>
>
> !\[fold-emulator-running\](https://user-images.githubusercontent.com/1134620/61652…371-a2d7ae00-ac6c-11e9-9907-bcb7da01b620.gif)
> 
> \## Why
> \[Android Q\](https://developer.android.com/preview/features/foldables) beta has support for folding the screen in the \[emulator\](https://developer.android.com/preview/features/foldables#emulators) and a list of features and APIs to support developers in using and adapting to foldable screens, I'd like to see the web have similar offerings in the form of a new @media query or queries. 
> 
> !\[fold-out-app-continuity\](https://user-images.githubusercontent.com/1134620/61652286-6dcb5b80-ac6c-11e9-8f6c-5a696f145125.gif)
> 
> This new device/OS state is not the same as orientation or device width. It's more than that, as a webapp could project content while in a folded state onto the back or side of a device. 
> 
> \*\*Imagine an \`\<aside\>\` literally on a foldable side of a device while reading an article.\*\*
> 
> \## What
> As I dig into the Android featureset and APIs, the nature of the media query feels akin to how devs work with \[projectors\](https://www.w3.org/TR/css3-mediaqueries/) and \[orientation\](https://www.w3.org/TR/css3-mediaqueries/). 
> 
> Designers and developers should be able to leverage or adapt to these foldable device states and either project content onto another half of the device, or just simply adjust to the wider or thinner viewports respectively. There are many options, designs, patterns, etc for how to handle and adjust to foldable phones, all of which are being pioneered or explored right now as the technology unfolds (😉). 
> 
> From the \[Android blog\](https://android-developers.googleblog.com/2018/11/get-your-app-ready-for-foldable-phones.html):
> \> On this new form factor, your application could be transitioned from one screen to another automatically (eg. when folding / unfolding a foldable phone).
> 
> \> During this transition, your app will receive a configuration change for the new layout (and possibly density in some cases).
> 
> The ability to handle this transition shouldn't be limited to native apps, the web should have hooks into handling this as well. 
> 
> !\[xiaomi\_fold\_lgd\](https://user-images.githubusercontent.com/1134620/61653140-7886f000-ac6e-11e9-8061-e875c7dfe77d.jpg)
> 
> !\[image-blog-perfecto-web-foldable-phones-recap-1\](https://user-images.githubusercontent.com/1134620/61653167-863c7580-ac6e-11e9-96f2-db8306d47768.png)
> 
> !\[galaxy-fold-100788841-large\](https://user-images.githubusercontent.com/1134620/61653192-905e7400-ac6e-11e9-96ca-dbcb1be6b8e1.jpg)
> 
> 
> \## How
> These are just my initial aggregated thoughts and assumptions from my research on which media queries would be useful. I hope to expand upon it greatly to cover the matrix of possibilities and unblock engineers on the web.
> 
> 1. is foldable screen
> 1. is consuming all screens
> 1. is folded vertically
> 1. is folded horizontally
> 1. is on main screen
> 1. is front / is back
> 1. is on screen (1-n)
> 1. can project onto screen (1-n)
> 
> I envision these media queries assisting and enhancing:
> \- css env vars
> \- regions!
> \- device width and height media queries
> \- portrait and landscape media queries
> 
> !\[google\_bubbles\_android\_q\_larger\](https://user-images.githubusercontent.com/1134620/61653240-b7b54100-ac6e-11e9-9749-94a4bf7af754.gif)
> 
> \## Conclusion
> I'm feeling like this media query could be very complex, as it needs to provide syntax for a wide array of foldables. That being said, the types of experiences and adaptations that web pages could do with the display hooks would make for very interesting and meaningful interactions. We should work towards enabling the web to handle the \[upcoming array of devices\](https://www.tomsguide.com/us/foldable-phones-release-date,news-28705.html).
> 
> 
> \##### Links/References
> \- https://www.w3.org/TR/css3-mediaqueries/
> \- https://developer.android.com/preview/features/foldables

但我在想，Discourse 的可折叠版本会是什么样子……

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2020年二月11日 17:46 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/4 "2020-02-11T17:46:43Z")

</div>

将窗口横跨两个屏幕是可选的：sweat\_smile。

对于不知道如何使用多个屏幕的应用程序，您可以单独使用各个屏幕。

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/c/8c49f8783693ea97858bc538bb868bfc66fcc0c0.png)

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2020年二月11日 17:59 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/5 "2020-02-11T17:59:52Z")

</div>

> [@downey](#):
>
> 但我很好奇，Discourse 的可折叠版本会是什么样子……

他们已经有了一些术语和标准 [文档](https://docs.microsoft.com/en-us/dual-screen/introduction)。

 ![](https://global.discourse-cdn.com/meta/original/3X/b/3/b3194ee513b8b230b035315dbe0ef21a9b6e7232.png)

Discourse 是“主 - 从”模式的绝佳候选。

模拟图：

 ![duomockup](https://global.discourse-cdn.com/meta/original/3X/b/8/b83eb51b59c23d63ece086db4a9f54ee68474568.png)

---

<div class="post-metadata">

### Author: ![Justin\_Vega](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin_vega/32/159021_2.png) [@Justin\_Vega](https://meta.discourse.org/u/Justin_Vega)
#### Post date: [2020年二月12日 00:16 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/6 "2020-02-12T00:16:52Z")

</div>

我很期待看到 Discourse 在这些特定设备上运行！😁

三星在创建该主题的同一天宣布推出 Galaxy Z Flip，这肯定是个惊人的巧合。🤔  
[https://a.msn.com/r/2/BBZTlEB?m=en-us&ocid=News](https://a.msn.com/r/2/BBZTlEB?m=en-us&ocid=News)

[![](https://img.youtube.com/vi/fhZXCmTkAgE/maxresdefault.jpg "Galaxy Z Flip phone") ](https://www.youtube.com/watch?v=fhZXCmTkAgE)

[Galaxy Z Flip3 5G | Samsung US](https://www.samsung.com/us/mobile/galaxy-z-flip)

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2020年五月8日 19:00 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/7 "2020-05-08T19:00:17Z")

</div>

这里有几个已适配折叠屏设备的 Web 应用演示：[A set of demos to showcase support of foldable devices on the web. | demos](https://foldable-devices.github.io/demos/)

---

<div class="post-metadata">

### Author: ![Justin\_Vega](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin_vega/32/159021_2.png) [@Justin\_Vega](https://meta.discourse.org/u/Justin_Vega)
#### Post date: [2020年九月1日 16:12 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/8 "2020-09-01T16:12:36Z")

</div>

我想我们九天后就能在真实硬件上测试 Discourse 了，而且只需 1,399 美元！😆

> **[Microsoft’s Surface Duo arrives on September 10th for $1,399](https://www.theverge.com/2020/8/12/21364633/microsoft-surface-duo-release-date-pricing-features-specs)**
>
> Microsoft’s bet on a dual-screen future starts next month

无论如何，还有另一款折叠设备需要测试。

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/0/a0ab910957aef8c5138096ccd02d8d1d916c2c2e.jpeg)

---

<div class="post-metadata">

### Author: ![Justin\_Vega](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin_vega/32/159021_2.png) [@Justin\_Vega](https://meta.discourse.org/u/Justin_Vega)
#### Post date: [2021年六月17日 17:27 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/9 "2021-06-17T17:27:14Z")

</div>

关于 Discourse，这个 API 可能值得了解一下。

> **[Better web support is coming for folding devices like the Pixel Fold via...](https://chromeunboxed.com/chrome-folding-device-web-support-deviceposture-api)**
>
> There's no doubt that more foldable phones, tablets and laptops are coming. With companies like Samsung, Motorola and Huawei blazing the trail, folding, personal electronic devices seem to be part of the future one way or another. After all, once...

---

<div class="post-metadata">

### Author: ![anon73664359](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@anon73664359](https://meta.discourse.org/u/anon73664359)
#### Post date: [2021年八月13日 00:09 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/11 "2021-08-13T00:09:57Z")

</div>

三星早在今年四月就在 Medium 上发布了这篇文章。对于 Discourse 开发者而言，非常值得一读。自该话题创建以来的近两年时间里，许多情况已发生了变化。  
[https://medium.com/samsung-internet-dev/web-responsive-design-for-the-new-generation-of-foldable-devices-ee434ae0fcb5](https://medium.com/samsung-internet-dev/web-responsive-design-for-the-new-generation-of-foldable-devices-ee434ae0fcb5)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2021年八月13日 18:38 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/12 "2021-08-13T18:38:56Z")

</div>

我并不看好折叠屏设备的未来。大多数产品表现平平，销量不佳，且评价负面。

---

<div class="post-metadata">

### Author: ![anon73664359](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@anon73664359](https://meta.discourse.org/u/anon73664359)
#### Post date: [2021年八月14日 02:02 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/13 "2021-08-14T02:02:59Z")

</div>

嗯，我认为它们不会消失。相反，我认为三星的最新产品已经解决了许多以往折叠设备存在的问题。

[![](https://global.discourse-cdn.com/meta/original/4X/0/e/3/0e3fff9b0a8cd01689c1d4261173f7383dad1b55.jpeg "Z Flip & Z Fold test the Value Consumers have in Folding Phones") ](https://www.youtube.com/watch?v=lCb6AIovg-s)

无论如何，我们还得拭目以待。我希望 Discourse 有一天能针对折叠设备优化。

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2021年八月29日 20:32 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/14 "2021-08-29T20:32:04Z")

</div>

我们拭目以待！不过，折叠操作对应用来说应该是透明的，就像在电脑上调整窗口高度或宽度一样。通常，应用会智能地响应，在空间出现时加以利用，或在空间消失时相应缩小。

---

<div class="post-metadata">

### Author: ![anon73664359](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@anon73664359](https://meta.discourse.org/u/anon73664359)
#### Post date: [2021年八月29日 20:33 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/15 "2021-08-29T20:33:47Z")

</div>

网站不需要自动优化吗？

 ![Image](https://global.discourse-cdn.com/meta/original/3X/b/3/b3194ee513b8b230b035315dbe0ef21a9b6e7232.png)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2021年八月29日 20:37 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/16 "2021-08-29T20:37:15Z")

</div>

我还要补充一点，Nintendo 2DS/3DS 也算是一个特例。有人觉得那种分屏设计真的让游戏变得更出色吗？我真心不这么认为。

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/9/59b76a594f4fdb211410c5adfd6d792e7c2fe9b7.jpeg)

或者干脆说说 Wii U 那奇怪的控制器和屏幕？

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/e/be53feffe8b6e4cfb0d8cd01522de6f88a293bb7.jpeg)

这篇文章恰恰证明了相反的观点。

[https://www.neoseeker.com/news/22680-miyamoto-people-will-eventually-depend-on-a-second-screen-getting-them-familiar-with-wii-u-is-key/](https://www.neoseeker.com/news/22680-miyamoto-people-will-eventually-depend-on-a-second-screen-getting-them-familiar-with-wii-u-is-key/)

> 在 Nintendo DS 刚推出时，曾有一段时间人们都说没人能同时看两个屏幕。但我几乎觉得，随着人们对 Wii U 和这些触摸屏界面越来越熟悉，终有一天他们会觉得：“如果没有第二块屏幕，我就无法完成所有想做的事。”

所以，如果我们把它理解为“只是把窗口调大了一点”，那么是的，完全正确！这说得通。但如果说“你有两块屏幕，必须分别用于相关但不同的用途”，那么……我得说，所有历史都表明，这种做法行不通。

---

<div class="post-metadata">

### Author: ![anon73664359](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@anon73664359](https://meta.discourse.org/u/anon73664359)
#### Post date: [2021年八月29日 20:42 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/17 "2021-08-29T20:42:59Z")

</div>

能够将智能手机变成迷你平板电脑（反之亦然），用于内容消费和阅读，确实非常方便。任天堂却在寻找一个本就不存在的问题。

---

<div class="post-metadata">

### Author: ![P2W](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/p2w/32/304345_2.png) [@P2W](https://meta.discourse.org/u/P2W)
#### Post date: [2021年八月29日 20:57 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/18 "2021-08-29T20:57:27Z")

</div>

在9个拿着“折叠屏”手机的人跑来抱怨之前。

他们肯定做过需求测试——到底谁在要求这些折叠屏手机？

---

<div class="post-metadata">

### Author: ![anon73664359](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@anon73664359](https://meta.discourse.org/u/anon73664359)
#### Post date: [2021年八月29日 21:18 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/19 "2021-08-29T21:18:57Z")

</div>

你会感到惊讶。

购买折叠屏设备的人数每年都在持续增长。仅今年就取得了巨大增长。三星的最新产品上市才几天，却已热销如潮，表现甚至超过了三星的“常规”产品。

[![](https://global.discourse-cdn.com/meta/original/4X/6/0/6/60694252c440ea54c47c2e15149ad24981adfb17.jpeg "Foldables outsell other Samsung flagships") ](https://www.youtube.com/watch?v=cc0uOAMTFEs&t=110)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2021年八月29日 21:22 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/20 "2021-08-29T21:22:08Z")

</div>

我乐意让市场来检验什么行得通！我唯一反对的是“针对不同用途提供两个完全不同的屏幕”这种做法，依我之见，这完全行不通。但作为调整浏览器窗口大小的一种方式，我觉得完全没问题。

---

<div class="post-metadata">

### Author: ![anon73664359](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@anon73664359](https://meta.discourse.org/u/anon73664359)
#### Post date: [2021年八月29日 21:27 UTC](https://meta.discourse.org/t/discourse-on-surface-duo/141312/21 "2021-08-29T21:27:48Z")

</div>

你怎么看三星 Z _ **Flip** _ 这类折叠设备呢？你让我很好奇…… 🙂

 ![Image](https://global.discourse-cdn.com/meta/original/3X/8/4/8407bec6c1397c954ea80e183e885c9a16d9f7aa.jpeg)

[下一頁](https://meta.discourse.org/t/discourse-on-surface-duo/141312.md?page=2)