Greasy Fork is available in English.
优化 X (Twitter) 在宽屏显示器上的布局，修复推文多图片和视频显示问题，使其宽度自适应屏幕。
当前为
// ==UserScript==
// @name X/Twitter Wide Screen Optimization (X/推特宽屏优化)
// @namespace http://tampermonkey.net/
// @version 1.1
// @description 优化 X (Twitter) 在宽屏显示器上的布局，修复推文多图片和视频显示问题，使其宽度自适应屏幕。
// @author vnry
// @match https://x.com/*
// @grant none
// @run-at document-start
// ==/UserScript==
(function() {
'use strict';
const style = document.createElement('style');
style.textContent = `
@media (min-width: 1600px) {
html, body {
height: auto !important;
min-height: 100vh !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent;
font-size: 15px;
color-scheme: dark;
line-height: inherit;
font-family: TwitterChirp, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: hsl(var(--foreground));
scrollbar-color: rgb(62, 65, 68) rgb(22, 24, 28);
pointer-events: auto;
cursor: default;
text-shadow: none !important;
align-items: stretch;
background-color: rgba(0,0,0,0.00);
border: 0 solid black;
box-sizing: border-box;
display: block;
flex-basis: auto;
flex-shrink: 0;
list-style: none;
margin: 0px;
min-height: 0px;
min-width: 0px;
padding: 0px;
position: relative;
text-decoration: none;
z-index: 0;
}
#react-root,
#react-root > div:first-child,
.css-175oi2r.r-1f2l425.r-13qz1uu.r-417010.r-18u37iz {
width: 100% !important;
max-width: unset !important;
min-width: unset !important;
flex: 1 1 auto !important;
height: auto !important;
min-height: 100vh !important;
overflow: visible !important;
}
header[role='banner'] {
flex-grow: 0 !important;
width: 70px !important;
min-width: 70px !important;
max-width: 70px !important;
flex-shrink: 0 !important;
}
header[role='banner'] > div:first-child {
width: 100% !important;
align-items: center !important;
}
nav[role='navigation'] a div[dir="ltr"] span.css-1jxf684.r-bcqeeo.r-1ttztb7.r-qvutc0.r-poiln3 {
display: none !important;
}
nav[role='navigation'] > * > div:first-child > div[dir=auto]:last-child {
display: none !important;
}
a[data-testid='SideNav_NewTweet_Button'] {
width: 48px !important;
min-width: 48px !important;
height: 48px !important;
min-height: 48px !important;
padding: 0 !important;
border-radius: 50% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
background-color: rgb(29, 155, 240) !important;
color: white !important;
}
a[data-testid='SideNav_NewTweet_Button'] span {
display: none !important;
}
a[data-testid='SideNav_NewTweet_Button'] svg {
display: block !important;
width: 1.5em !important;
height: 1.5em !important;
fill: currentcolor !important;
}
div[data-testid='SideNav_AccountSwitcher_Button'] {
padding: 4px !important;
}
div[data-testid='SideNav_AccountSwitcher_Button'] > div:nth-child(2),
div[data-testid='SideNav_AccountSwitcher_Button'] > div:nth-child(3) {
display: none !important;
}
main[role='main'] {
width: 100% !important;
flex-grow: 1 !important;
flex-shrink: 1 !important;
height: auto !important;
min-height: 100% !important;
overflow-y: visible !important;
display: flex !important;
flex-direction: column !important;
}
main[role='main'] > div:first-child {
width: 100% !important;
max-width: unset !important;
margin: 0 !important;
flex-grow: 1 !important;
flex-shrink: 1 !important;
height: auto !important;
min-height: 100% !important;
display: flex !important;
flex-direction: row !important;
}
main[role='main'] > div:first-child > div:nth-child(2) > div:first-child {
width: 100% !important;
max-width: unset !important;
margin: 0 !important;
flex-grow: 1 !important;
flex-shrink: 1 !important;
height: auto !important;
min-height: 100% !important;
}
[data-testid='primaryColumn'] {
max-width: 1800px !important;
width: 100% !important;
flex-grow: 1 !important;
flex-shrink: 1 !important;
margin-left: auto !important;
margin-right: auto !important;
border-left: none !important;
border-right: none !important;
height: auto !important;
min-height: 100% !important;
overflow-y: visible !important;
}
article[data-testid="tweet"] [data-testid="tweetPhoto"] {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: unset !important;
overflow: visible !important;
display: block !important;
margin: 0 auto !important;
position: relative !important;
}
article[data-testid="tweet"] [data-testid="videoPlayer"] {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: unset !important;
position: relative !important;
opacity: 1 !important;
display: block !important;
transform: none !important;
}
article[data-testid="tweet"] [data-testid="videoPlayer"] video {
width: 100% !important;
height: auto !important;
max-height: 80vh !important;
object-fit: contain !important;
opacity: 1 !important;
display: block !important;
position: relative !important;
top: unset !important;
left: unset !important;
transform: none !important;
}
article[data-testid="tweet"] [data-testid="videoPlayer"] .r-1niwhzg.r-vvn4in,
article[data-testid="tweet"] [data-testid="videoPlayer"] img.css-9pa8cd {
width: 100% !important;
height: auto !important;
max-height: 80vh !important;
object-fit: contain !important;
background-size: contain !important;
background-position: center !important;
background-repeat: no-repeat !important;
opacity: 1 !important;
display: block !important;
position: relative !important;
transform: none !important;
z-index: 1 !important;
}
article[data-testid="tweet"] [data-testid="videoPlayer"] button[aria-label*="播放"],
article[data-testid="tweet"] [data-testid="videoPlayer"] [data-testid*="videoPlayerControl"] {
z-index: 9999 !important;
opacity: 1 !important;
}
article[data-testid="tweet"] [data-testid="tweetPhoto"] img.css-9pa8cd:not([src*="amplify_video_thumb"]) {
width: 100% !important;
height: auto !important;
max-height: 80vh !important;
object-fit: contain !important;
display: block !important;
opacity: 1 !important;
position: relative !important;
transform: none !important;
}
article[data-testid="tweet"] [data-testid="tweetPhoto"] > div:first-child.r-1adg3ll.r-13qz1uu {
padding-bottom: 0 !important;
height: auto !important;
min-height: 0 !important;
position: static !important;
}
article[data-testid="tweet"] .r-1kqtdi0.r-1phboty.r-rs99b7.r-1867qdf.r-1udh08x {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block !important;
overflow: visible !important;
min-height: 0 !important;
}
[data-testid='primaryColumn'] > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
max-width: 100% !important;
width: 100% !important;
margin: auto !important;
}
[data-testid='primaryColumn'] > div:first-child > div:last-child {
width: 95% !important;
max-width: unset !important;
margin: auto !important;
}
[data-testid='sidebarColumn'] {
width: 300px !important;
max-width: 300px !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
margin-left: 20px !important;
height: auto !important;
min-height: 100% !important;
overflow-y: visible !important;
}
[data-testid='sidebarColumn'] > div:first-child > div:last-child,
[data-testid='sidebarColumn'] > div:first-child > div:last-child > div:first-child > div:first-child > div:first-child > div:first-child {
width: 100% !important;
}
.css-175oi2r.r-1xpp3t0 {
width: 100% !important;
max-width: unset !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.css-175oi2r.r-f8sm7e.r-13qz1uu.r-1ye8kvj {
max-width: 1800px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
height: auto !important;
min-height: 100% !important;
overflow-y: visible !important;
}
[aria-labelledby='master-header'] {
max-width: 100% !important;
margin: 0 !important;
width: 250px !important;
flex-shrink: 0 !important;
flex-grow: 0 !important;
}
[aria-labelledby='detail-header'] {
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
flex-grow: 1 !important;
}
[aria-labelledby='detail-header'] > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2),
[aria-labelledby='detail-header'] > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
width: 90% !important;
max-width: 90% !important;
margin: auto !important;
}
[role='main'] > div:first-child > div:first-child > div:first-child {
max-width: 100% !important;
}
[data-testid='primaryColumn'] > div:first-child > div:first-child > div:last-child > div:first-child > div:last-child {
width: 95% !important;
max-width: unset !important;
margin: auto !important;
}
}
`;
document.head.appendChild(style);
})();