How to properly scale graphics for HTML5 games?

Question

HTML

It is necessary to make the game look approximately the same on different display resolutions (from smartphone to tablet), i.e. the height/width of the graphic was proportional to the size of the display. Which approach is more correct and why? 2D game, Phaser engine.
1. Draw graphics for maximum resolution (tablet), and on devices with a smaller display, scale down. Will it slow down a lot?
2. Draw graphics for the minimum resolution (smartphone), and on devices with a larger display, scale up. Will the graphics be blurry?
3. Do not use the scale-manager, but assign the width/height of the sprites based on the width/height of the device display. What are the disadvantages of this method?
4. Your option?

Answer 1

3 segments of the maximum of 2 sizes:
1. up to 840px
2. up to 1280px
3. from 2048px and above
Determine the display dimensions and load the required assets folder.

Answer 2

// validation patterns
const fname =  /^[a-z ]{5,}$/i;
const sname = /^[a-z ]{5,}$/i;
const email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$/;
const phone = /^\+7[0-9]{10}$/;

const patterns = { 
  name: fname, 
  surname: sname, 
  email, 
  phone, 
  mobilePhone: phone, 
  workPhone: phone 
};

// forms
const forms = [
  { name: 'Ivan Ivanov', email: '[email protected]', phone: '[phone]' },
  { name: 'III', email: '[email protected]', phone: '11111' },
  { name: 'Ivan Ivanov', email: '[email protected]', phone: '[phone]', mobilePhone: '[phone]'},
  {},
  { name: 'Ivan Ivanov', email: '[email protected]', phone: '[phone]', mobilePhone: 'фывыафывафыв'},
  { name: 'Ivan Ivanov', email: '[email protected]', phone: '[phone]', mobilePhone: '[phone]', workPhone: 'asfdadsfd', surname: ''},
  { surname: 'Ivan Ivanov', mobilePhone: 'фывафыва', name: 'Ivan Ivanov', email: '[email protected]', phone: '[phone]', workPhone: '[phone]'
  }
];

validateAll(forms, patterns);

function validateAll(forms, patterns) {
  return forms.map( form => validate(form, patterns) );
}


function validate(form, patterns) {
  const keys = Object.keys(form);
  const errors = [];
  
  if(!keys.length) return {target: {}, errors: ['empty form is provided']};
  
  keys.forEach(key => {
    if( !patterns[key].test(form[key]) ) {
      errors.push(`${key} value is invalid`);
    }
  });
  
  return {
    target: JSON.stringify(form),
    errors
  };
}

https://repl.it/IBuo/1

spoiler

p.s. если захочешь отблагодарить - https://money.yandex.ru/to/410013748902785 (не принципиально)