CSS to run jsPsych on smartphones
Just add the following line to the header section.
<meta name="viewport" content="width=device-width,initial-scale=1.0">
This repository provides a sample CSS (smartphone.css
). Edit this file as you like, and load it in the same way as jspsych.css
. Note that you need to include the jspsych.css
before the smartphone.css
, and the smartphone.css
doesn't affect the appearance on PC.
<link rel="stylesheet" href="jspsych.css"></link>
<link rel="stylesheet" href="smartphone.css"></link>
- A width of 480 pixels or less is considered to be a smartphone. You can change the size freely.
- The CSS file does not enable keyboard input on smartphones.
- The
scale_width
property (e.g., survey-likert) andslider_width
property (e.g., html-slider-response) are overwritten by thesmartphone.css
. - Some CSS properties (e.g., The font size of the prompt in the survey-likert plugin) need to be given a higher priority by specifying
!important
. - The free-sort plugin is not supported.