The value of $:/info/browser/screen/width and $:/info/browser/screen/height don’t change because the screen is still the same size! What you want is to get the current window width and height, which are not included in the standard TWCore info mechanism.
Note that for many “responsive layout” use-cases, CSS @media definitions can suffice. For example, in $:/themes/tiddlywiki/vanilla/base you can find the following rule to set the tiddler editor’s “add field value” input control width, based on the current value of the sidebarbreakpoint:
@media (min-width: <<sidebarbreakpoint>>) {
.tc-edit-field-add-value {
width: 35%;
}
}
where the <<sidebarbreakpoint>> variable is defined as:
\define sidebarbreakpoint()
<$text text={{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}/>
\end
However, for some non-CSS use-cases it may be necessary to get the actual current window size, whose value can be queried from the browser environment.
Here’s a startup tiddler that adds an “event listener” to catch the window “resize” event, and writes the current window width and height (in pixels) into $:/info/browser/window/width and $:/info/browser/window/height
/*\
title: TiddlyTools/Startup/WindowSize.js
type: application/javascript
module-type: startup
author: Eric Shulman
revision: 1.0
* Adds an event listener for window resize events.
* Gets the current window width and height (in pixels)
* Saves results in $:/info/browser/window/width and $:/info/browser/window/height
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
// Export name and synchronous status
exports.name = "windowsize";
exports.platforms = ["browser"];
exports.after = ["startup"];
exports.synchronous = true;
exports.startup = function() {
/* SET INITIAL WINDOW SIZE */
var w=( window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth );
var h=( window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight );
$tw.wiki.addTiddler(new $tw.Tiddler({ title:"$:/info/browser/window/width", text:w.toString() },null,{},$tw.wiki.getModificationFields()));
$tw.wiki.addTiddler(new $tw.Tiddler({ title:"$:/info/browser/window/height", text:h.toString() },null,{},$tw.wiki.getModificationFields()));
/* SETUP LISTENER FOR UPDATING WINDOW SIZE */
window.addEventListener("resize", function(event) {
var w=( window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth );
var h=( window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight );
$tw.wiki.addTiddler(new $tw.Tiddler({ title:"$:/info/browser/window/width", text:w.toString() },null,{},$tw.wiki.getModificationFields()));
$tw.wiki.addTiddler(new $tw.Tiddler({ title:"$:/info/browser/window/height", text:h.toString() },null,{},$tw.wiki.getModificationFields()));
});
};
})();
Note that the values for current width and height depend on which browser you are using. Thus, in the above code, the width and height are retrieved using the following “fallback” references:
var w=( window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth );
var h=( window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight );
enjoy,
-e