如何为移动设备和台式机设备提供两个不同的html页面

时间:2020-08-28 09:05:24

标签: php html css

我在这里看了一下,但是只能找到wordpress或类似的解决方案。

我有一个相对较小的网站,为移动和台式机用户提供两种完全不同的方法。

理想情况下,我想为这两类用户提供两个完全不同的网站。不太理想的是,我愿意为两个用户提供两个不同的目标网页。

我该如何实现?只要php或javascript或任何其他解决方案都能正常工作(即我可以从这里重现它,而不必太着迷于学习新事物),则可以使用它。越简单越好,因为我不是Web开发方面最熟练的人(没关系,这是我正在做的一个小巧的项目,很有趣)。

编辑:

尝试使用jquery和建议的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>MyPage</title>
    <style type="text/css">
        html,body {height:100%;width:100%;margin:0;padding:0;}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  
    <div id="mobile-container">
mobile
    </div>

    <div id="desktop-container">
        desktop
    </div>
    <!-- This script switches based on the detected screen-->

    <script>
$(document).ready(function () {

    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
      jQuery('#mobile-container').show();
    }else{
      jQuery('#desktop-container').show();
   }
});
    </script>


</body>




</html>

1 个答案:

答案 0 :(得分:0)

您应根据桌面视图或移动设备视图使用两个具有不同html的不同容器。默认情况下,使两个容器都显示:无

然后使用jquery更改视图。

const number = document.querySelector('.number_tmp');

function number_format(number, decimals, dec_point, thousands_sep) {
  // Strip all characters but numerical ones.
  number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
  var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
    s = '',
    toFixedFix = function(n, prec) {
      var k = Math.pow(10, prec);
      return '' + Math.round(n * k) / k;
    };
  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
  if (s[0].length > 3) {
    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
  }
  if ((s[1] || '').length < prec) {
    s[1] = s[1] || '';
    s[1] += new Array(prec - s[1].length + 1).join('0');
  }
  return "$" + s.join(dec);
}

number.addEventListener('keyup', (e) => {
  const element = e.target;
  const value = element.value;
  element.value = number_format(value, 0, '', ',');
  document.getElementById('number').value = value.replace(/\D/g, '')

});