/*
Call this 'setBodyFontSize_accordingToDeviceScreenProps.js'
javascript with statements like
that should be put right after the tag.
This script is intended to set 'body' 'font-size' to a
relative value (like 100% or 140% --- or 1.0em or 1.4em) according to
whether it looks like the browser window is in landscape or portrait mode.
It is intended to avoid too-small fonts on a smartphone
when the phone is in 'portrait' orientation.
Ideally, we would like to query the device/browser width in inches
(or centimeters) and set the 'body' font-size according
to a linear calculation formula that takes into account the typical
distance of eyes from the device surface. This would allow
for setting appropriate font-size for small devices such as
smart phones as well as huge devices like stadium screens.
This script is to be used with a '.css' file that sets fonts of
other elements --- such as table, tr, td, th, p, h1-h6, pre, code
--- to relative values, like em's or percents. Those values are to
apply to 'root' fontsizes such as 1em (set by webbrowser defaults,
and perhaps overridden by the user).
See the '.css' file at /cssFiles/set_element_styles.css
REFERENCE for manipulating CSS with Javascript (esp. 'pre' fontsize):
https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript#Accessing_style_sheets
This Javascript file was
Created 2018aug06.
Changed 2018nov04. (Added the font-size for 'pre' elements.)
Changed 2020jun06. (Put '#####' in some comment statements to emphasize
that they are not commented code statements.
Change 'pre' font-size from 1.8em to 1.4em
for portrait mode.)
*/
if (window.innerWidth < window.innerHeight) {
// ##### Set the 'body' fontsize --- for phones,pads in portrait mode.
// document.body.style.fontSize = "180%";
document.body.style.fontSize = "1.8em";
// ##### Set the 'pre' elements font-size --- for phones, etc.
// ##### (In some browsers, pre-fontsize is not inherited from body.)
var sheet = document.createElement('style');
sheet.innerHTML = "pre, code {font-size: 1.4em;}";
document.body.appendChild(sheet);
} else {
// #### Set the 'body' fontsize --- for desktops ---
// #### actually for browser window in landscape mode.
// document.body.style.fontSize = "100%";
document.body.style.fontSize = "1.0em";
// #### Set the tags font-size --- for desktops.
// #### Can use this to adjust from fontsize set in site CSS file.
// var sheet = document.createElement('style');
// sheet.innerHTML = "pre, code {font-size: 1.0em;}";
// document.body.appendChild(sheet);
}