为什么我的Wordpress页面突然不适合移动设备?

时间:2017-03-07 20:32:44

标签: php html wordpress mapbox mobile-browser

我在Github托管网站上有一个Mapbox Map,它反映在Wordpress网站上。 Wordpress镜像不会在移动设备上显示它应该如何,它非常小而且难以阅读,就像它显示桌面版本一样,但原始网站显示正确。 Side-by-side comparison of maps 原文:http://jfact0ry.com/theRIDE/

镜像:http://ridesitka.com/map/

我为当地的公交机构制作了这张地图。他们的网站托管在Wordpress.org网站上。我使用iframe页面作为wordpress的模板:(信用到Sup-a-Dillie-O

<?php
/**
    Template Name: Content Only
*/
?>
<html>
<head>
   <title><?php wp_title( '|', true, 'right' ); bloginfo('url'); ?></title>
   <style>
       html,body,div,iframe {height:100%;}
       p {position:relative;overflow:hidden;}
       iframe {border:none;width:100%;}
       body {margin:0;padding:0;}
   </style>
</head>

<body>
      <?php while (have_posts()) : the_post(); ?>
      <?php the_content(); endwhile; ?> 
</body>
</html>

这是网站theRIDE/index.html

的完整html

什么会使Wordpress中的这种负载不同?我需要更改什么才能使其适合移动设备?

谢谢。

编辑:更改了图片的网址

1 个答案:

答案 0 :(得分:1)

<head>部分,您错过了这个:

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

这使得比例正确。

这个有效

Correct

这个不是

Incorrect