Попытка заставить макет страницы работать с мобильными тестами Google - PullRequest
Новая
       6

Попытка заставить макет страницы работать с мобильными тестами Google

0 голосов
/ 30 декабря 2018

Мой первый пост после долгих поисков на форуме, поэтому, пожалуйста, будьте осторожны со мной!

У меня есть 20-летний веб-сайт, который нужно сделать мобильным максимально простым, главным образом черезcss (на данный момент на сайте почти 2200 страниц, поэтому редактирование отдельных страниц вручную практически невозможно).

Получение даже самых простых из этих страниц, которые Google классифицирует как удобные для мобильных устройств, кажется невозможным без ущерба для некоторых требований к макету.В этом случае центрирование контента, по-видимому, приводит к ошибке «Страница не подходит для мобильных устройств» от Google.

Я переписал старый html и сейчас твердо записал css на страницу, пока язаставить его работать и может перенести его на лист CSS.

Я использовал 320px в качестве ширины div, потому что это дало мне хорошую отправную точку для теста Google.Но центрирование содержимого страницы осуществляется с помощью «margin-left: auto; margin-right: auto;»создает ошибку теста Google для мобильных устройств.Вытащите его, и страница пройдет.

Измените div на 100% и установите ширину изображения в 320px проходов, но это также удалит центрирование страницы.Затем увеличение ширины изображения для больших дисплеев на мобильных устройствах приводит к ошибке Google.Похоже, я ходил кругами, поэтому мог бы дать несколько советов.

Приведенный ниже код показывает, где находится страница - по центру, но генерируется ошибка Google, поскольку контент не умещается на экране. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<base target="_top" />
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body style="text-align: center; overflow-x: hidden;">

<div style="width: 320px; margin-left: auto; margin-right: auto;">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" id="Popup1">
<tr>
    <td width="100%">
    <img border="0" src="../images/Americas/North/Native_Powhatan_Tribe01_max.jpg" alt="Test" style="max-width: 100%; width: 100%;" height="auto"><!-- Image width is 1000px --></td>
</tr>
</table>

</div>

</body>
</html>

Это текущая версия страницы в ее текущем состоянии: http://www.historyfiles.co.uk/KingListsAmericas/NorthPowhatan_Tribe01_Full.htm

Это тестовая версия микросайта страницы со всеми моими правками: http://www.historyfiles.co.uk/microsite_live/KingListsAmericas/NorthPowhatan_Tribe01_Full.htm

(проблематичным является размер изображения и контейнер, поэтому на данный момент все остальное убрано).

Ответы [ 2 ]

0 голосов
/ 30 декабря 2018

Я предлагаю вам использовать Bootstrap для создания адаптивного интерфейса.По следующей ссылке вы можете узнать о HTML-адаптивном веб-дизайне: https://www.w3schools.com/html/html_responsive.asp

Кроме того, вы можете скачать и изучить загрузчик здесь: https://getbootstrap.com/

Это поможет вам создать адаптивный имобильный дружественный веб-дизайн легко.В вашем случае я изменил таблицу на DIV, а также добавил немного CSS.надеюсь, это поможет вам. 

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>The History Files</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <style>
        .header {
            background-color: black;
            height: 20px;
        }
        .header > img {
            vertical-align: top;
            padding-left: 3px;
        }

        .SlideImage {
            width: 100%;
            padding: 0 15px 5px 15px;
        }
        h1 {
            color: #AB3108;
            padding-left: 15px;
        }

        footer {
            background-color: #c6bebe;
            margin: 0 100px 0 100px;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="header">
            <img src="http://www.historyfiles.co.uk/images/KAStrap_thin.jpg" />
        </div>
    </div>
    <div class="container">
        <div class="row">
            <img src="http://www.historyfiles.co.uk/images/Americas/North/Native_Powhatan_Tribe01_max.jpg" class="SlideImage" />
        </div>
    </div>

<div class="container">
    <div class="row">
        <h1>Captain John Smith</h1>
        <p>John Smith is shown in this illustration trading 
            with the native Americans who resided close to James Fort, probably 
            in 1607-1608, although his explorations took him much further afield, 
            across the northern edge of Chesapeake Bay and into Susquehannock 
            territory.</p>
    </div>
</div>

<footer>
    <div class="container">
        <p>Original text copyright © P L Kessler and the 
            History Files. Image copyright © respective copyright holders. 
            An original photo page for the History Files. Go 
            back or return home.</p>
    </div>
</footer>
<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
0 голосов
/ 30 декабря 2018

BODY имеет значения по умолчанию / отступы.Сначала сбросьте их margin:0;padding:0 и добавьте width:100% для полной ширины / подгонки к экрану. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<meta http-equiv="Content-Language" content="en-gb">
<link rel="stylesheet" type="text/css" href="http://www.historyfiles.co.uk/microsite_live/css/history_mainstyles.css" />
<meta name="ROBOTS" content="noindex, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<base target="_top" /><meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<style type="text/css" media="all" />
@import "http://www.historyfiles.co.uk/microsite_live/css/history_substyles.css";
</style>

</head>
<!-- I changed this line. -->
<body style="width:100%;margin:0;padding:0">

<div style="width:320px;margin:0 auto">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" id="Popup1">
<tr>
    <td width="100%">
    <img border="0" src="https://via.placeholder.com/1000x500/4B89DA/F4F6F9" alt="Test" width="100%"><!-- Image width is 1000px --></td>
</tr>
<tr>
    <td width="100%" height="10">
	</td>
  </tr>
  <tr>
    <td width="100%">

	<p class="popuptitle">Captain John Smith</p>

    </td>
  </tr>
  <tr>
    <td width="100%">

	<p class="popup">John Smith is shown in this illustration trading 
	with the native Americans who resided close to James Fort, probably 
	in 1607-1608, although his explorations took him much further afield, 
    across the northern edge of Chesapeake Bay and into Susquehannock 
    territory.</p>

	</td>
</tr>
<tr>
    <td width="100%" height="70">
	</td>
</tr>
<tr>
    <td width="100%">

    <p class="popup">Original text copyright © P L Kessler and the 
    History Files. Image copyright © respective copyright holders. 
    An original photo page for the History Files. Go 
    <a href="javascript:history.back()">back</a> or return 
    <a target="_top" href="../index.html">home</a>.</p>

	</td>
</tr>
<tr>
    <td width="100%" height="70">
	</td>
</tr>
<tr>
	<td width="100%" bgcolor="#141414">

	<!-- Footer links -->
	<p class="navftr" style="margin-bottom: 5px;">Copyright © 1999-2018 <a href='http://www.kessler-web.co.uk/' target='_blank'><span class='navftr'>Kessler Associates.</span></a> All rights reserved.</p>

	</td>
</tr>
</table>

</div>

</body>
</html>
...