地图铺满整个视口宽度(批 18)

反馈:界面宽度是固定的(正文版心 1080px 居中),地图也被框在这一条里。
按用户选择:**只让地图突破版心、占满整屏**,列表与文字仍保持版心(宽屏下好读)。

- 首页「旅行地图」与详情页「行程路线」都铺满整个视口宽度,
  高度改成 `clamp(460px, calc(100vh - 190px), 1000px)` —— 屏幕越大容器越大,
  地图显示的地理范围也越大(AMap 填满容器 + fitView 按当前视野重算),
  等于跟着分辨率自动缩放。
- 改窗口大小 / 旋转屏幕时:重算出量 → `map.resize()` → 重新适配视野并重排标记
  (200ms 防抖)。

🔴 出血量为什么由 JS 给(模板里的 `bleed()`):
版心留白是 `max(gutter, (100% - 1080px)/2)`,**自定义属性里的 100% 是在「使用它的
那个元素」上解析的** —— 把它取负直接写在地图元素(它在版心内部,宽 1080)上,
算出来只有 -gutter,实测地图只铺到 1128/1440。
所以改成读 container 实际渲染出来的 `padding-left` 再取负。
也不写 `width: 100vw`:它含滚动条宽度,会让整页横向溢出。

验证:两条几何断言钉住「铺满」+「不溢出」(详情页 18 项 / 首页 29 项),
首页还逐档改视口(390 / 768 / 1280 / 1920 / 2560)各量一次 —— 是真的改视口,
不是只看默认尺寸。另重抓了一次线上快照,用工作树 CSS 跑布局几何检查 385 项。
本地全链 13 步全绿(渲染检查 372 项);远端 e2e 365 项 0 失败;
部署静态断言 213 条 0 FAIL、双 PHP 渲染逐字节一致、内容断言全过。
This commit is contained in:
2026-09-24 18:59:03 +08:00
parent 9051dc73a5
commit 28fb9f6112
3 changed files with 82 additions and 5 deletions
+27
View File
@@ -166,6 +166,20 @@ require dirname(__DIR__) . '/comments/_block.php';
}
if (!route.length) return;
/* 地图铺满整个视口宽度:把正文版心的左右留白用负 margin 还回去。
⚠️ 不能写 CSS `calc(-1 * var(--shell-pad))`:自定义属性里的 `100%` 在使用它的
元素上解析,地图在版心内部(宽 1080),算出来只有 -gutter,铺不满。
这里读 container 实际渲染出的 padding 反推;也不用 100vw(含滚动条会溢出)。 */
function bleed() {
var host = el.closest('.container');
if (!host) return;
var pad = parseFloat(window.getComputedStyle(host).paddingLeft) || 0;
if (pad <= 0) return;
el.style.marginLeft = (-pad) + 'px';
el.style.marginRight = (-pad) + 'px';
}
bleed();
map = new AMap.Map(el, { viewMode: '2D', zoom: 5 });
/* 挂到 window 供自动化测试(真浏览器量标记位置)与线上排查用;页面卸载即释放 */
window.__routeMap = map;
@@ -377,6 +391,19 @@ require dirname(__DIR__) . '/comments/_block.php';
所以缩放结束后按新的像素位置重排一次(不重新适配视野)。 */
map.on('zoomend', function () { drawRoute(true); });
/* 改窗口大小 / 旋转屏幕 / 换分辨率:地图宽度是铺满视口的,容器一变
就要按新尺寸重新适配视野并重排标记。防抖 200ms。 */
var resizeTimer = null;
window.addEventListener('resize', function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
if (!map) return;
bleed(); // 版心留白变了,出血量跟着变
map.resize();
drawRoute(); // 重新适配视野 + 按新像素重排标记
}, 200);
});
/* 只有地名、没有坐标的地点:向高德地理编码查坐标(插件按需加载)。
查到就补进数据并重画;查不到(地名太偏/写错)保持缺省,不硬造位置。 */
function geocode(name, cb) {