Skip to content

kurokida/jspsych_smartphone_css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jspsych_smartphone_css

CSS to run jsPsych on smartphones

The Simplest Method

Just add the following line to the header section.

<meta name="viewport" content="width=device-width,initial-scale=1.0">

More to your liking

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>

Limitations

  • 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) and slider_width property (e.g., html-slider-response) are overwritten by the smartphone.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.

About

CSS to run jspsych on smartphones

Resources

License

Stars

Watchers

Forks

Packages

No packages published